Antd select 在全屏对话框中不起作用

Posted 2023-02-22

【中文标题】Antd select 在全屏对话框中不起作用

【英文标题】：Antd select not working inside a full screen dialog

【发布时间】：2019-05-24 09:54:14

【问题描述】：

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

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

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

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

【参考方案1】：

如果我将dropdownStyle= zIndex: 2000 添加到选择中，它似乎可以工作。

【讨论】：

它对我有用！谢谢！仅供参考，这个问题也发生在抽屉组件上。

【参考方案2】：

将 zIndex=20 添加到 Dialog 组件，将 zIndex=2000 添加到 Select

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