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

Question

我想更改 mui 工具栏的内部组件颜色。例如，一旦我单击过滤器框，我就在此处添加了列，其中包含开关和其他按钮的默认颜色。但我需要根据我的主题更改它们。我怎样才能改变这些？

const GridCustomToolbar = () => {
        return (
            <>
                <GridToolbarContainer>
                    <GridToolbarColumnsButton
                        sx={{
                            color: designToken?.palette.buttonColor,
                            '&:hover': {
                                background: designToken?.palette.hoverColor,
                            },
                        }}
                    />
                    <GridToolbarDensitySelector
                        sx={{
                            color: designToken?.palette.buttonColor,
                            '&:hover': {
                                background: designToken?.palette.hoverColor,
                            },
                        }}
                    />
                    <Box sx={{ flexGrow: 1 }} />
                    <GridToolbarQuickFilter InputProps={{ disableUnderline: true }} />
                </GridToolbarContainer>
            </>
        );
    };

Answer 1

您可以通过

columnsPanel

的

slotProps

属性传递这些样式，如下所示：

slotProps={{
  columnsPanel: {
    sx: {
      '& .MuiDataGrid-columnsPanel': {
        '& .Mui-checked': {
          color: designToken?.palette.buttonColor,
          '&+.MuiSwitch-track': {
            backgroundColor: designToken?.palette.buttonColor,
          },
        },
      },
      '& .MuiDataGrid-panelFooter': {
        '& .MuiButton-root': {
          color: designToken?.palette.buttonColor,
        },
      },
    },
  },
}}

您可以查看 this StackBlitz 以获取实时工作示例。 您可以在此处查看 mui datagrid v6 的可用插槽列表。