Material UI Datagrid 的过滤器功能无法正常工作答案

【问题标题】：Filter functionality of Material UI Datagrid not working correctlyMaterial UI Datagrid 的过滤器功能无法正常工作
【发布时间】：2021-07-04 00:36:21
【问题描述】：

我正在使用 Material UI Data Grid 来显示一个表格。默认情况下，它会为每一列显示一个额外的过滤器以进行排序。但是，当我单击过滤器时，它会在我的引导模式后面。有没有办法解决它？这是我单击 ID 过滤器（三个垂直点）时的外观。

这是我的 Modal 中的 DataGrid 的代码。删除了不相关的标题、标题等内部的 html。返回语句如下所示：

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

这是渲染中的 HCP 表变量，其中包含数据网格。我使用了一些 if 条件来展示它，它们并不重要，所以没有包括它们。

   HCPTable = 
            <div class="row" style={{ marginTop: '15px' }}>
                    <div style={{ height: 400, width: '100%' }}>
                        <DataGrid
                            rows={this.state.advancedSearchResults} columns={columns} pageSize={5}
                            onRowSelected = {(rowSelection) => {this.setState({selectedRow: rowSelection.data,
                                HCPSelected: new Array(String('[' + rowSelection.data.npi + "]" + rowSelection.data.first_name))
                            }, ()=> {
                                let HCPSelected = new Array(String('[' + rowSelection.data.npi + "]" + rowSelection.data.first_name))
                                console.log(HCPSelected);
                                console.log(typeof(HCPSelected));
                                console.log('state inside DataGrid: ',this.state);
                            })}}
                        />
                    </div>
                </div>

我希望过滤器下拉列表位于前面而不是后面。我知道这应该是一个小的 CSS 更改，但不知道在哪里进行。

编辑：

所以我发现在控制台中更改 z-index 使其能够排在前面。我更改了此类中的 z-index：

但是如何在我的应用程序中访问该类以使其永久更改。

编辑2：

这是我要更改的屏幕截图：

【问题讨论】：

如果有人有任何问题，请告诉我。

标签： javascript css reactjs datagrid material-ui

【解决方案1】：

您可以通过组件的自定义点将样式应用于此类：


const useStyles() = makeStyles((theme) => ({
    root: {
        z-index: 500,
    }
}))

const yourComponent = () => {
    const classes = useStyles();
    return (
        <DataGrid
            ...
            classes={{
                root: classes.root
            }}
        />
    );
}

因此，如果您想覆盖其他一些内容，以下是 DataGrid 组件的可用类列表，然后您可以将其定位在根类中： https://material-ui.com/api/data-grid/#css

示例：您希望您的单元格是红色的

然后您将以下代码添加到您的根对象：


const useStyles() = makeStyles((theme) => ({
    root: {
        z-index: 500,
        '& .MuiDataGrid-cell': {
            color: 'red',
        },
    }
}))

【讨论】：

感谢您的帮助，但我使用了不同的方法。我已经发布了相同的答案。
我又问了一个与材质 UI Datagrid 样式相关的问题。你可以检查一下：stackoverflow.com/questions/67002102/…

【解决方案2】：

我最终通过在 App.js 文件中进行这些更改找到了一种方法。导入styleprovider，然后导入materialStyles css文件。

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

    class App extends Component {

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

Materialstyless.css：

    .MuiDataGridMenu-root {
z-index: 3000
    }

【讨论】：