Antd select 无法在全屏对话框中工作

Question

我在我的React应用程序中使用materialui和antd作为ui组件库。我一直在使用material ui的全屏dialog并尝试在对话框中插入antd的select。

但是看起来选择列表在放置在material-ui 的对话框组件内时无法正确渲染。我试图让 antd 选择一个非常大的具有绝对位置的 zindex 但没有运气。

这是codesanbox 链接。您可以选择解决对话框，但相同的选择组件在放置在全屏对话框中时不会呈现其选项列表

https://codesandbox.io/s/1zvj51xmj

Answer 1

如果我将

dropdownStyle={{ zIndex: 2000 }}

添加到选择中，它似乎可以工作。

Answer 2

将 zIndex=20 添加到对话框组件，将 zIndex=2000 添加到选择

 <Dialog
    open={openSetTagsDialog}
    onClose={SetTagsDialoghandleClose}
    aria-labelledby="form-dialog-setTags"
    maxWidth={"md"}
    style={{zIndex:20}}
  >
 <Select style={{zIndex:2000}}>{...options...}</Select>
<Dialog>

Answer 3

尝试将

popupClassName="pointer-events-auto"

添加到选择组件，它对我有用。