如何修改MUI DataGridPro工具栏内部组件的颜色？

要修改工具栏弹出的筛选/列面板内开关、按钮等组件的颜色，可通过以下几种方式实现：

方法1：通过自定义全局主题配置 #

全局配置能让所有Data Grid的弹出面板组件统一应用自定义颜色，适合全项目风格统一的场景：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';

// 自定义主题
const customTheme = createTheme({
  components: {
    // 配置列面板内的开关样式
    MuiSwitch: {
      styleOverrides: {
        root: {
          '&.MuiDataGrid-columnsPanel .MuiSwitch-root': {
            '& .MuiSwitch-switchBase.Mui-checked': {
              color: designToken?.palette.primaryColor, // 开关选中态颜色
            },
            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
              backgroundColor: designToken?.palette.primaryColor, // 开关轨道选中颜色
            },
          },
        },
      },
    },
    // 配置列面板内的按钮样式
    MuiButton: {
      styleOverrides: {
        root: {
          '&.MuiDataGrid-columnsPanel .MuiButton-root': {
            color: designToken?.palette.buttonColor,
            '&:hover': {
              backgroundColor: designToken?.palette.hoverColor,
            },
            // 针对"Apply"这类主按钮
            '&.MuiButton-contained': {
              backgroundColor: designToken?.palette.primaryColor,
              '&:hover': {
                backgroundColor: designToken?.palette.primaryHoverColor,
              },
            },
          },
        },
      },
    },
  },
});

// 在表格外层包裹主题提供者
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <DataGrid
        components={{ Toolbar: GridCustomToolbar }}
        // 其他表格配置项
      />
    </ThemeProvider>
  );
}

方法2：通过sx属性嵌套选择器局部控制 #

如果只需要针对当前自定义工具栏的弹出面板生效，可以直接在GridToolbarColumnsButton的sx属性中嵌套选择器：

const GridCustomToolbar = () => {
  return (
    <>
      <GridToolbarContainer>
        <GridToolbarColumnsButton
          sx={{
            color: designToken?.palette.buttonColor,
            '&:hover': {
              background: designToken?.palette.hoverColor,
            },
            // 控制弹出列面板内的组件样式
            '& .MuiDataGrid-columnsPanel': {
              '& .MuiSwitch-switchBase.Mui-checked': {
                color: designToken?.palette.primaryColor,
              },
              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
                backgroundColor: designToken?.palette.primaryColor,
              },
              '& .MuiButton-root': {
                color: designToken?.palette.buttonColor,
                '&:hover': {
                  backgroundColor: designToken?.palette.hoverColor,
                },
                '&.MuiButton-contained': {
                  backgroundColor: designToken?.palette.primaryColor,
                  '&:hover': {
                    backgroundColor: designToken?.palette.primaryHoverColor,
                  },
                },
              },
            },
          }}
        />
        <GridToolbarDensitySelector
          sx={{
            color: designToken?.palette.buttonColor,
            '&:hover': {
              background: designToken?.palette.hoverColor,
            },
          }}
        />
        <Box sx={{ flexGrow: 1 }} />
        <GridToolbarQuickFilter InputProps={{ disableUnderline: true }} />
      </GridToolbarContainer>
    </>
  );
};

方法3：使用styled组件封装自定义按钮 #

通过styled组件封装GridToolbarColumnsButton，可以更清晰地分离样式逻辑：

import { styled } from '@mui/material/styles';
import { GridToolbarColumnsButton } from '@mui/x-data-grid';

// 封装带自定义样式的列按钮
const StyledColumnsButton = styled(GridToolbarColumnsButton)(({ designToken }) => ({
  color: designToken?.palette.buttonColor,
  '&:hover': {
    background: designToken?.palette.hoverColor,
  },
  '& .MuiDataGrid-columnsPanel': {
    '& .MuiSwitch-switchBase.Mui-checked': {
      color: designToken?.palette.primaryColor,
    },
    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
      backgroundColor: designToken?.palette.primaryColor,
    },
    '& .MuiButton-root': {
      color: designToken?.palette.buttonColor,
      '&:hover': {
        backgroundColor: designToken?.palette.hoverColor,
      },
      '&.MuiButton-contained': {
        backgroundColor: designToken?.palette.primaryColor,
        '&:hover': {
          backgroundColor: designToken?.palette.primaryHoverColor,
        },
      },
    },
  },
}));

// 在工具栏中使用封装后的组件
const GridCustomToolbar = () => {
  return (
    <>
      <GridToolbarContainer>
        <StyledColumnsButton designToken={designToken} />
        <GridToolbarDensitySelector
          sx={{
            color: designToken?.palette.buttonColor,
            '&:hover': {
              background: designToken?.palette.hoverColor,
            },
          }}
        />
        <Box sx={{ flexGrow: 1 }} />
        <GridToolbarQuickFilter InputProps={{ disableUnderline: true }} />
      </GridToolbarContainer>
    </>
  );
};

注意事项 #

• 可通过浏览器开发者工具查看弹出面板内组件的类名，确保选择器精准匹配
• 如果designToken需要全局访问，可将其注入到MUI主题的自定义属性中，避免重复传递props

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