Material UI DataGrid的ColumnMeun被Dialog重叠答案

【问题标题】：Material UI DataGrid's ColumnMeun is overlapped by DialogMaterial UI DataGrid的ColumnMeun被Dialog重叠
【发布时间】：2021-02-11 02:12:50
【问题描述】：

在 Dialog 中创建了一个 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;">

我尝试在对话框组件中使用 classes={{ root: (z-index=0) }}。但它仍然被 1300 覆盖。

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

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

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

【问题讨论】：

标签： reactjs datagrid material-ui

【解决方案1】：

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

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

查看snippet

【讨论】：

哦....我非常接近答案（我的解决方案 1）。因为我使用“类”来应用样式。它将被覆盖，但使用“样式”，它不会被覆盖。 OMG，我在考虑解决方案。感谢您的帮助！