如何覆写Material-Table columnsButton内置弹窗的MUI复选框样式

问题背景 #

项目中使用Material-Table组件渲染数据表格，在options配置项开启columnsButton属性后，会在表格搜索栏旁生成列控制按钮，点击唤起的弹窗内自带MUI复选框，勾选/取消勾选即可控制对应列的显示/隐藏。这些复选框是组件内置生成，无需手动编写代码实现，现在需要覆写这部分复选框的边框颜色、选中状态颜色，匹配项目配色主题。

效果参考 #

• 列控制弹窗效果：
• 表格实际运行效果：

当前实现代码 #

<MaterialTable
    title=""
    data={intakes.intakes}
    columns={columns}
    icons={tableIcons}
    options={{
        columnsButton: true
    }}
/>

实现方法 #

根据需求场景二选一即可：

方法1：全局主题覆写（推荐，适配所有组件内置MUI控件） #

Material-Table底层完全基于MUI组件开发，列控制弹窗内的复选框就是标准的MUI Checkbox组件，直接在项目MUI主题配置中覆写复选框全局样式，即可让所有MUI复选框（包括Material-Table内置的所有复选框）自动匹配项目主题，一次配置全局生效，适合整体做主题适配的项目：

// MUI v5 版本导入路径
import { createTheme, ThemeProvider } from '@mui/material/styles';
// MUI v4 版本请替换导入路径为 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const customTheme = createTheme({
  components: {
    MuiCheckbox: {
      styleOverrides: {
        root: {
          // 配置未选中时的边框颜色
          color: '#替换为你项目的边框色值',
          '&.Mui-checked': {
            // 配置选中状态的填充色
            color: '#替换为你项目的主题色值',
          },
        },
      },
    },
  },
});

// 用主题容器包裹MaterialTable组件即可，如果包裹应用根节点则全局生效
<ThemeProvider theme={customTheme}>
  <MaterialTable
    title=""
    data={intakes.intakes}
    columns={columns}
    icons={tableIcons}
    options={{
        columnsButton: true
    }}
  />
</ThemeProvider>

方法2：局部样式覆写（仅修改列控制弹窗内的复选框） #

如果不想改动全局MUI复选框样式，只需要调整列控制弹窗里的控件样式，可以通过CSS选择器精准命中目标元素，单独设置样式，不会影响页面其他位置的复选框：

<MaterialTable
    title=""
    data={intakes.intakes}
    columns={columns}
    icons={tableIcons}
    options={{
        columnsButton: true
    }}
    // 新增局部样式
    sx={{
      // 命中列控制弹窗弹出层内的所有复选框
      '&& .MuiPopover-paper .MuiCheckbox-root': {
        color: '#替换为你项目的边框色值',
        '&.Mui-checked': {
          color: '#替换为你项目的主题色值',
        }
      }
    }}
/>

提示：如果使用的是MUI v4版本，把sx属性换成classes属性绑定自定义类名，或者直接在全局CSS文件里写对应类名的样式即可，类名规则和上述一致。

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