如何更改 Mui DataGrid 工具栏颜色？

Question

这是我的 Mui dataGrid 自定义工具栏

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  )
}

如何更改颜色？ 默认颜色是这样的：

Answer 1

您可以通过将以下 CSS 代码添加到 GridToolBarContainer 来更改 CustomToolBar 的颜色：

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton style={{ color: '#3f51b5' }} />
      <GridToolbarFilterButton style={{ color: '#3f51b5' }} />
      <GridToolbarDensitySelector style={{ color: '#3f51b5' }} />
      <GridToolbarExport style={{ color: '#3f51b5' }} />
    </GridToolbarContainer>
  )
}

如果您想使用十六进制颜色代码，请将“蓝色”替换为所需的十六进制颜色代码，包括“#”符号。

Answer 2

您只需添加一个

color

道具并使用您的主题样式

<GridToolbarColumnsButton color="secondary" />

无需添加手动样式。

Answer 3

是的，“这不再起作用了。” 现在需要如下所示完成