css - TreeSelect 在 Modal 中使用它并尝试打开它以查看它的元素时隐藏在后面

Question

我尝试使用 带有Modal的Ant Design TreeSelect 组件，但是当打开 TreeSelect 时，树的值隐藏在 Modal 后面。

我尝试使用更高的 z-index 值，但没有帮助！有任何想法吗？

import React from "react";
import ReactDOM from "react-dom";
import { version } from "antd";
import { TreeSelect } from "antd";

import {
  Button,
  ComposedModal,
  ModalBody,
  ModalFooter,
  ModalHeader
} from "carbon-components-react";

import "antd/dist/antd.css";
import "./index.css";

const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-1",
        key: "0-0-1"
      },
      {
        title: "Child Node2",
        value: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1"
  }
];

function treeSelectChange(e, value) {
  console.log(e);
  //e.preventDefault()
}

ReactDOM.render(
  <div className="App">
    <h1>antd version: {version}</h1>
    {/* <p>
      Please <b>fork</b> this sandbox to reproduce your issue.
    </p> */}

    <ComposedModal
      open={true}
      // onClose={(e) => this.closeRuleEditorModal(e) }
      className=""
    >
      <ModalHeader title="Rule Editor" className="HeaderToolbar White" />
      <ModalBody>
        <TreeSelect
          // className="on-front"
          style={{
            width: "100%"
          }}
          // value={element.Value}
          dropdownStyle={{
            maxHeight: 400,
            overflow: "auto",
            zIndex: 10000
            // position: "absolute"
          }}
          treeData={treeData}
          // placeholder={element.Name}
          treeDefaultExpandAll
          onChange={treeSelectChange}
        />
      </ModalBody>
      <ModalFooter>
        <Button
          kind="secondary"
          size="small"
          // onClick={(e) => this.closeRuleEditorModal(e) }
        >
          Cancel
        </Button>
        <Button
          kind="primary"
          id="btnSave"
          size="small"
          // onClick={() => this.fabricateCustomizedProject()}
        >
          Save
        </Button>
      </ModalFooter>
    </ComposedModal>
  </div>,
  document.getElementById("root")
);

要重现问题，您也可以使用 https://codesandbox.io/s/antd-reproduction-template-ci559

更新

当我使用值为 10000 的 z-index 时，它对我有用（不知道为什么我必须设置如此高的值，这似乎是我用于其他组件的 CSS 之一-Modal- 在内部使用了一个大的 z-index） .

标签： cssreactjsantd