AG Grid React嵌入MUI Dialog样式不生效问题求助

AG Grid React嵌入MUI Dialog后数据可正常显示，但样式完全未生效，相关代码如下：

导入代码 #

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';

组件代码 #

<Dialog open={open}
         TransitionComponent={Transition}
         keepMounted
         onClose={handleClose}>
    <DialogTitle>{"Cart"}</DialogTitle>
    <DialogContent style={{ height: 'auto' }}>
        <div className="ag-material" style={{ height: "40vh", width: "60vh" }}>
            <AgGridReact
                ref={cartGridRef}
                gridOptions={gridOptions}></AgGridReact>
        </div>
    </DialogContent>
    <DialogActions>
        <Button onClick={handleClose}>CLOSE</Button>
        <Button onClick={handleClose}>CLEAR</Button>
        <Button onClick={handleClose}>PLACE ORDER</Button>
    </DialogActions>
</Dialog>

问题截图：

解决办法 #

核心问题是AG Grid的主题类名写错了：你给外层div加的ag-material并非AG Grid官方的主题类名，正确的Material主题类名是ag-theme-material。

修改组件代码中外层div的className即可：

<div className="ag-theme-material" style={{ height: "40vh", width: "60vh" }}>
    <AgGridReact
        ref={cartGridRef}
        gridOptions={gridOptions}></AgGridReact>
</div>

额外检查点：

• 确认AG Grid的CSS文件导入顺序正确（先导入ag-grid.css，再导入主题样式），你当前的导入顺序是符合要求的
• 如果修改后仍有样式异常，可检查DialogContent是否存在overflow: hidden等限制样式，调整对应属性即可

内容的提问来源于stack exchange，提问作者Praveen Rao Chavan.G