如何修改MUI DataGrid列下拉菜单单选按钮及相关按钮颜色？

你遇到的核心问题是：列选择下拉菜单里的单选开关（Switch）和「HIDE ALL」「SHOW ALL」按钮属于独立弹出层（Popper），DOM结构不在DataGrid组件内部，所以直接通过DataGrid的sx属性无法穿透修改这些元素的样式。以下是两种可行的解决方法：

方法1：通过MUI主题定制（推荐） #

利用MUI的主题系统全局或局部覆盖组件样式，确保弹出层内的组件能继承自定义样式：

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 自定义主题，覆盖目标组件样式
const customTheme = createTheme({
  components: {
    // 覆盖Switch选中状态的背景色
    MuiSwitch: {
      styleOverrides: {
        switchBase: {
          '&.Mui-checked': {
            backgroundColor: bpi_light_green,
          },
        },
        track: {
          '&.MuiSwitch-switchBase.Mui-checked + &': {
            backgroundColor: bpi_light_green,
          },
        },
      },
    },
    // 精准定位下拉菜单内的操作按钮，修改文字颜色
    MuiButton: {
      styleOverrides: {
        root: {
          '&.MuiGridColumnMenuHideAllButton-root, &.MuiGridColumnMenuShowAllButton-root': {
            color: bpi_light_green,
          },
        },
      },
    },
  },
});

// 在DataGrid外层包裹ThemeProvider
<ThemeProvider theme={customTheme}>
  <DataGrid
    density="compact"
    columns={cols}
    rows={searchResData}
    className="mx-auto min-h-[300px] bg-white"
    initialState={{
      pagination: { paginationModel: { pageSize: 10 } },
      columns: { columnVisibilityModel: {} },
    }}
    pageSizeOptions={[5, 10, 15, 20]}
    autoHeight
    slots={{
      toolbar: GridToolbar,
      noRowsOverlay: () => noRowsOverlay(keyword as string),
      noResultsOverlay: () => noResultsOverlay(),
    }}
    style={{ minWidth: "80%" }}
    loading={loading}
  />
</ThemeProvider>

方法2：使用全局CSS选择器 #

如果不想修改主题，可以给DataGrid添加自定义类名，然后通过全局CSS定位弹出层元素（注意避免样式污染）：

第一步：添加全局CSS #

/* 在项目全局CSS文件中添加 */
.data-grid-custom .MuiPopper-root .MuiSwitch-switchBase.Mui-checked {
  background-color: bpi_light_green;
}

.data-grid-custom .MuiPopper-root .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: bpi_light_green;
}

.data-grid-custom .MuiPopper-root .MuiGridColumnMenuHideAllButton-root,
.data-grid-custom .MuiPopper-root .MuiGridColumnMenuShowAllButton-root {
  color: bpi_light_green;
}

第二步：给DataGrid添加自定义类 #

<DataGrid
  className="mx-auto min-h-[300px] bg-white data-grid-custom"
  // 其他原有属性保持不变
/>

关键说明 #

• 弹出层DOM独立于DataGrid，所以DataGrid自身的sx样式无法作用到这些元素；
• 使用MuiGridColumnMenuHideAllButton-root、MuiGridColumnMenuShowAllButton-root这类DataGrid专属类名，可以精准定位目标按钮，避免影响页面其他Button组件。

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