如何修改MUI X DataGrid工具栏颜色？附自定义Toolbar代码

• 内联样式快速调整
  直接给GridToolbarContainer加style属性，快速设置背景色：

  function CustomToolbar() {
    return (
      <GridToolbarContainer style={{ backgroundColor: '#f0f4f8', padding: '8px' }}>
        <GridToolbarColumnsButton />
        <GridToolbarFilterButton />
        <GridToolbarDensitySelector />
        <GridToolbarExport />
      </GridToolbarContainer>
    )
  }
  

  这种方式简单直接，适合临时调整单个工具栏的样式。

• 用Styled组件自定义样式
  借助MUI的styled工具创建定制化容器，还能同步调整内部按钮的颜色：

  import { styled } from '@mui/material/styles';
  import { GridToolbarContainer } from '@mui/x-data-grid';
  
  const StyledToolbarContainer = styled(GridToolbarContainer)(({ theme }) => ({
    backgroundColor: theme.palette.primary.light,
    '& .MuiButton-root': {
      color: theme.palette.common.white, // 把按钮文字改成白色，适配深色背景
    }
  }));
  
  function CustomToolbar() {
    return (
      <StyledToolbarContainer>
        <GridToolbarColumnsButton />
        <GridToolbarFilterButton />
        <GridToolbarDensitySelector />
        <GridToolbarExport />
      </GridToolbarContainer>
    )
  }
  

  这种方式能和项目的MUI主题联动，样式更统一。

• 全局主题覆盖（所有DataGrid生效）
  如果要让项目里所有DataGrid的工具栏都用同一种样式，可以在自定义主题里配置：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiDataGrid: {
        styleOverrides: {
          toolbar: {
            backgroundColor: '#e3f2fd',
          }
        }
      }
    }
  });
  
  // 在应用根组件里用ThemeProvider包裹
  function App() {
    return (
      <ThemeProvider theme={theme}>
        {/* 你的DataGrid组件放在这里 */}
      </ThemeProvider>
    );
  }
  

  一次配置全局生效，不用每个工具栏单独设置。

内容的提问来源于stack exchange，提问作者aryan