如何自定义 mui-material 数据网格标题大纲？答案

【问题标题】：How can I customize the mui-material datagrid header outline?如何自定义 mui-material 数据网格标题大纲？
【发布时间】：2022-01-03 08:43:03
【问题描述】：

我想改变 Mui Datagrid 大纲的设计从

到

由于某种原因无法上传代码，有参考资料或示例代码吗？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

查看 Material UI 数据网格 - 样式页面

https://mui.com/components/data-grid/style/

【讨论】：

可以通过提供一些关于您如何解决问题的详细见解来改进此答案。

【解决方案2】：

自定义数据网格的最简单方法是使用sx 道具。你可以在https://mui.com/api/data-grid/data-grid/#css查看所有可用的css规则

要删除数据网格边框使用.MuiDataGrid-root 规则，您可以在其中添加边框属性。我看到你也删除了列分隔符。为此，请使用.MuiDataGrid-columnSeparator

如果您检查以下代码，我会在 .MuiDataGrid-root 前面加上 & 符号。但尚未将& 签名添加到.MuiDataGrid-columnSeparator。您可以打开您的 chrome 开发人员工具，查看关联的 CSS 规则是否附加了任何父类。如果有，您可以在规则前面加上&。这样你就不用写完整的类规则了。

<DataGrid
  ...
  sx={{
    '.MuiDataGrid-columnSeparator': {
      display: 'none',
    },
    '&.MuiDataGrid-root': {
      border: 'none',
    },
  }}
/>

【讨论】：