React.js中如何修改Material UI的Checkbox图标样式

你只需要在现有MUI主题的Checkbox样式覆盖配置中，新增未选中状态的图标颜色规则即可，无需修改全局主题主色。

你之前的配置仅覆盖了选中状态的图标颜色，未选中状态默认继承全局palette主色，所以才会显示为深色主题下的黑色。修改后的完整MuiCheckbox配置如下：

MuiCheckbox: {
  styleOverrides: {
    root: {
      transition: "all .2s ease",

      // 原有选中状态颜色规则保留
      "&.Mui-checked": {
        ".MuiSvgIcon-root": {
          color: colors.darkTheme.primary.bright,
        },
      },
      // 新增未选中状态的图标颜色规则
      "&:not(.Mui-checked)": {
        ".MuiSvgIcon-root": {
          color: colors.darkTheme.secondary.main, // 你配置中secondary.main已定义为#fff白色，可直接使用
        },
      },

      ".MuiSvgIcon-root": {
        fontSize: "2.2rem",
      },

      ".MuiTouchRipple-root": {
        opacity: "0.3",
      },
    },
  },
},

上述新增的规则只会命中未勾选状态的Checkbox组件，仅修改该组件的图标颜色，不会影响全局其他组件的主题配色。

你提到的原效果图：

如果仅需要修改个别Checkbox的颜色，不需要全局生效，也可以直接在组件上通过sx属性自定义：

<Checkbox 
  sx={{
    '&:not(.Mui-checked) .MuiSvgIcon-root': {
      color: '#fff'
    }
  }}
/>

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