Material UI DataGrid的ColumnMeun被Dialog重叠

Question

在对话框中创建了一个 DataGrid。但是栏目菜单被Dialog重叠了

请查看以下演示 SandBox

到目前为止我发现和尝试的内容：

对话框将创建一个 html 标签

z-index:1300 将覆盖栏目菜单

<div role="presentation" class="MuiDialog-root makeStyles-dialogRoot-41" style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;">

我尝试在对话框组件中使用类={{ root: (z-index=0) }} 。但是还是被1300覆盖了。

2.Clicking 列菜单将创建用于选择排序操作的工具提示列表

<div role="tooltip" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(217px, 137px, 0px);" x-placement="bottom-end">

如果我直接在浏览器(F12) 中在此标签中添加z-index=1500。菜单将正常工作。但是我不知道如何将 CSS 应用到这个标签。

Answer 1

您可以在 Dialog 组件中添加 style={{ zIndex: 0 }}。

<Dialog
  open={open}
  onClose={handleClose}
  maxWidth="md"
  fullWidth
  style={{ zIndex: 0 }}
>

勾选snippet

Material UI DataGrid的ColumnMeun被Dialog重叠

Material UI DataGrid's ColumnMeun is overlapped by Dialog

datagrid

reactjs

material-ui