如何修改MUI Checkbox复选框的勾选标记颜色？

在深色背景容器中使用Material UI（MUI）的Checkbox组件时，默认勾选标记会继承容器的文本颜色。若需要将勾选标记改为白色且避免出现多余白边，可通过以下方法实现：

核心解决方案：精准设置勾选图标颜色 #

无需为图标添加背景色，直接针对Checkbox的选中状态定位SVG图标，通过sx属性设置颜色即可：

<div
  className="App"
  style={{ color: "white", backgroundColor: "#333", padding: 20 }}
>
  <div>效果：白色勾选标记且无多余白边</div>
  <Checkbox
    defaultChecked
    sx={{
      // 选中状态下的勾选标记设为白色
      "&.Mui-checked .MuiSvgIcon-root": {
        fontSize: 28,
        color: "white"
      },
      // 可选：未选中时的边框也设为白色，适配深色背景
      "& .MuiSvgIcon-root": {
        color: "white"
      }
    }}
  />
</div>

常见无效方法的原因 #

• 设置color属性：仅修改Checkbox的强调色（如选中后的背景填充色），并非勾选标记（SVG路径）的颜色。
• 添加backgroundColor：会给整个SVG图标容器添加背景，导致出现粗白边，这不是修改勾选标记颜色的正确方式。
• 自定义SVG图标：未正确继承MUI的状态类（如Mui-checked），无法联动选中/未选中状态的样式变化。

进阶：全局主题定制（批量适配深色模式） #

如果需要全局所有Checkbox在深色模式下都使用白色勾选标记，可通过自定义MUI主题批量修改：

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

const darkModeTheme = createTheme({
  components: {
    MuiCheckbox: {
      styleOverrides: {
        root: {
          "&.Mui-checked .MuiSvgIcon-root": {
            color: "white"
          },
          "& .MuiSvgIcon-root": {
            color: "white"
          }
        }
      }
    }
  }
});

// 用主题包裹应用组件
<ThemeProvider theme={darkModeTheme}>
  {/* 你的应用内容 */}
</ThemeProvider>

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