如何修改Material UI Checkbox组件的未选中状态边框颜色

• 复选框选中状态效果：
  
• 复选框未选中状态效果：
  

我目前调整复选框样式时只修改了填充色、对勾颜色等属性，现在想要将复选框未选中时的边框调整为深色调，找不到对应的配置项，求解决方案。

我的原有实现代码：

<Grid item xs={12}>
  <FormControlLabel control={<Checkbox onChange={(event) => {
    console.log(event.target.checked)
    setValue('isParty', false)
  }} />} label="Party" />
</Grid>

你使用的是Material UI的Checkbox组件，未选中状态的边框样式可以通过针对非选中状态下的SVG图标设置stroke属性实现，两种常用实现方式如下：

方式1：单组件内通过sx属性配置 #

直接在当前Checkbox组件上添加样式规则，仅影响当前组件：

<Grid item xs={12}>
  <FormControlLabel 
    control={
      <Checkbox 
        sx={{
          // 配置未选中状态的边框颜色
          '&:not(.Mui-checked) .MuiSvgIcon-root': {
            stroke: '#222', // 替换为你需要的深色调色值即可
          },
          // 你原有配置的选中状态、对勾颜色等规则可继续保留在这里
        }}
        onChange={(event) => {
          console.log(event.target.checked)
          // 修正原有代码问题：原写法无论勾选状态都设置为false，建议改为动态取值
          setValue('isParty', event.target.checked)
        }} 
      />
    } 
    label="Party" 
  />
</Grid>

方式2：全局主题配置统一修改 #

如果需要项目内所有复选框的未选中边框都生效，可以在全局主题中覆盖样式：

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

// 自定义主题配置
const customTheme = createTheme({
  components: {
    MuiCheckbox: {
      styleOverrides: {
        root: {
          '&:not(.Mui-checked) .MuiSvgIcon-root': {
            stroke: '#222', // 全局统一的未选中边框深色调
          }
        }
      }
    }
  }
});

// 用自定义主题包裹你的应用根组件即可
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的原有项目代码 */}
    </ThemeProvider>
  )
}

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