如何自定义多材质数据网格标题轮廓？

Question

我想改变 Mui Datagrid 轮廓的设计

到

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

Answer 1

自定义数据网格的最简单方法是使用sxprops。您可以在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',
    },
  }}
/>

Answer 2

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

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