javascript - 设置 Material UI DataGrid Filter 的 z-index

Question

我目前正在尝试使用 Material UI 的 filter 属性。这是 UI 最初的样子：

单击过滤器按钮后，我得到以下信息：

但是，当我单击列、运算符或值按钮时，什么都没有发生。我认为这些字段不起作用，因为它们的 z-index 值可能是错误的。有谁知道这些字段的类名，以便我可以相应地设置 z-index 值。我知道如何覆盖 Material UI 的 CSS 类。我是这样做的：

    import { StylesProvider } from "@material-ui/core/styles";
    import './materialStyles.css';

   class App extends Component {

render() {
return (
  <StylesProvider injectFirst>
    <div>
      <Layout />
    </div>
  </StylesProvider>
)

在 materialStyles.css 中，我设置了样式：

  .MuiDataGridMenu-root {
z-index: 3000
}

.MuiDataGridPanel-root {
z-index: 3001;
 }

所以基本上，我只需要帮助我正确使用这些过滤器的类的名称。有谁知道列、运算符和值的这些类的名称（在屏幕截图中）。还是有另一种方法可以让我完成这项工作？

虽然这不相关，但这是我的 DataGrid 代码供参考：

   HCPTable =
      <div class="row" style={{ marginTop: '15px' }}>
                    <div style={{ height: 400, width: '100%' }} >
                        <DataGrid 
                            rows={this.state.advancedSearchResults} columns={columns} pageSize={5}
                        />
                    </div>
                </div>
  
      }
    }

像这样在我的回报里面。如您所见，我正在使用 React Bootstrap 模态。

  <Modal show={this.state.menu} dialogClassName="modal-width">
     <div class="modal-content modal inmodal" >
       <Modal.Header> </Modal.Header>
        <Modal.Body class="modal-body">
           {HCPTable}
        </Modal.Body> 
            </div>
            </Modal>

本质上，我只想在屏幕截图中定位列、运算符和值类的 z-index。

编辑：

添加了一个屏幕截图，显示我在元素表中看到了模式对话框，即使我没有在代码中明确添加它。

标签： javascriptcssreactjsdatagridmaterial-ui