如何自定义 MUI 中复选框的颜色？答案

【问题标题】：How can I customize the color of a Checkbox in MUI?如何自定义 MUI 中复选框的颜色？
【发布时间】：2017-05-11 00:06:23
【问题描述】：

我在我的项目中使用MUI，我在div 中有一个黑色背景的Checkbox。但它看起来不太好，因为Checkbox 也是黑色的。如何将Checkbox 的颜色从黑色更改为另一种颜色？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

可能是两种方法。

“本地”

CheckBox 有属性 labelStyle 和 iconStyle。我想你可以从调整它们开始：

<Checkbox
  label="Custom icon"
  labelStyle={{color: 'white'}}
  iconStyle={{color: 'white'}}
/>

我不确定这是否足够，所以您可能需要与其他“风格”props of Checkbox 一起玩。检查名称中包含“样式”的所有内容。

创建主题

您可以设置一些只会影响复选框的主题设置：

您可以使用storybook-addon-material-ui 演示page 创建您的主题并下载它。

【讨论】：

谢谢@Oleg。我尝试了“inputStyle”、“iconStyle”、“labelStyle”和“style”。 'labelStyle' 确实会改变标签文本的颜色，但它们都不会改变复选框的颜色。这是test jsfiddle。我认为我需要一个“本地”解决方案，因为我想使用默认样式保留我的其他复选框。
嘿奥列格，谢谢你。我一直在互联网上寻找 MaterialUI 中每个元素的属性来设计我的主题，但我似乎找不到完整的文档。材料ui网站没有这个。我从不同的地方收集了一些按钮和切换等。有没有地方可以获取所有元素的完整属性列表，包括如何设置自定义属性？谢谢

【解决方案2】：

您需要使用iconStyle，但是由于复选框图标是SVG图像，您需要使用fill而不是color来设置颜色：

https://jsfiddle.net/27Lmaz48/1/

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>

【讨论】：

你能用十六进制颜色代替命名颜色吗？
如果我可以责怪 material-ui 的一件事是他们的网站上缺乏示例......它充满了工作示例，但他们从未展示过原始代码......
使用哪个版本的material-ui？
我认为这个答案对于 Material UI 4.11.3 来说已经过时了

【解决方案3】：

对我来说，我只需要更改表头复选框，这对我有用

.thsvg svg{
  fill: white !important;
}


<TableHeader
   className="thsvg"
    displaySelectAll={true}
    adjustForCheckbox={true}
    enableSelectAll={true}>
  <TableRow>     
    <TableHeaderColumn>Name</TableHeaderColumn>
  </TableRow>
</TableHeader>

【讨论】：

【解决方案4】：

这是一个老问题，但对于那些使用材料 1.2 的人来说。

iconStyle 不适合我。

但是，我通过覆盖现有主题并将“复选框”组件包装到一个新主题来实现这一点。

import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';



const checkBoxStyles = theme => ({
    root: {
      '&$checked': {
        color: '#3D70B2',
      },
    },
    checked: {},
   })

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

现在您可以在渲染函数中使用“CustomCheckbox”组件了。

当它被选中时，颜色应该是你指定的颜色。

【讨论】：

【解决方案5】：

这就是你的做法：

 <FormControlLabel  
                control={
                  <Checkbox
                    checked={cryon}
                    onChange={this.handleChange('cryon')}
                    style ={{
                      color: "#00e676",
                    }}
                    value="cryon"
                  />
                }
                label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
              />

【讨论】：

我喜欢这个解决方案，因为它易于应用，并且对选中和未选中的颜色都有影响。适用于material-ui 4.8.0

【解决方案6】：

checkBox 具有名为 color 的属性，它的值可以是 default 或 primary 或 secondary，例如：

 <Checkbox
   onChange={doSth}
   value="checkedIncomplete"
   color="primary"
  />

您可以通过重写其类 Css 以简单的方式更改主要颜色和次要颜色，主要颜色为：.MuiCheckbox-colorPrimary，次要颜色为：.MuiCheckbox-colorSecondary

所以你可以在 Css 中编辑：.MuiCheckbox-colorPrimary { color : 'yourColor'}

【讨论】：

【解决方案7】：

对我来说，这是通过添加根和检查分类来解决的

const styles = () => ({
  root: {
    "&$checked": {
      color: "rgba(0, 0, 0, 0.54)"
    }
  },
  checked: {}
})

并在复选框的类中传递它

<Checkbox
          checked={checked}
          classes={{
            root: classes.root,
            checked: classes.checked
          }}
          onChange={handleCheckBox}
        />

希望这对其他人有所帮助

【讨论】：

【解决方案8】：

这在 material-ui 4.1 上对我有用。在Checkbox 上定义color 属性，值为="primary"

<Checkbox color="primary"...>

用原色覆盖 material-ui 的样式。将此条目添加到一个 css 文件中，该文件将导入到呈现 Checkbox 的 javascript 代码中。

.MuiCheckbox-colorPrimary.Mui-checked {
color: #e82997 !important;
}

【讨论】：

【解决方案9】：

您可以为选中和未选中条件分配自定义图标，然后设置复选框图标的样式例如： <Checkbox checkedIcon={<CustomIcon style={{color:'red'}}/>} icon={<CustomIcon/>} inputProps={{ 'aria-label': 'decorative checkbox' }} {...props} />

【讨论】：

【解决方案10】：

对于稍后来寻求答案的任何人，
如果 labelStyle 和 iconStyle 不适合你
并且您希望以后能够更改颜色尝试以下操作：

const useStyles = makeStyles<Theme, {color: string}, "root">({
    root: {
        color: (props: {color: string}) => props.color,
    },
})

export default function ColoredCheckbox() {
     const styles = useStyles({color: "#whatevercoloryouwant"})
     return <Checkbox color="default" className={styles.root} />
}

【讨论】：

【解决方案11】：

你可以使用material ui theme。

const theme = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      colorSecondary: {
        color: '#custom color',
        '&$checked': {
          color: '#custom color',
        },
      },
    },
  },
});

got it from here

【讨论】：

这太棒了！我为我的用例添加了 colorPrimary。

【解决方案12】：

在 MUI v5 中，有 2 种首选方法可以更改 Checkbox 颜色：

`sx`道具

这对于一次性样式很有用，可以快速设置但仅适用于特定的Checkbox：

import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";

<Checkbox
  {...props}
  sx={{
    [`&, &.${checkboxClasses.checked}`]: {
      color: 'magenta',
    },
  }}
/>

`color`道具

您可以查看this 的答案以获取更多详细信息。基本上某些组件的color 属性（例如Button、Checkbox、Radio、...）必须是来自Palette 对象的颜色之一，可以根据自己的喜好进行扩展：

import { pink, yellow } from "@mui/material/colors";
import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    pinky: palette.augmentColor({ color: pink }),
    summer: palette.augmentColor({ color: yellow })
  }
});

<ThemeProvider theme={theme}>
  {/* pre-defined color */}
  <Checkbox />
  <Checkbox color="secondary" />
  <Checkbox color="success" />
  <Checkbox color="default" />
  {/* custom color */}
  <Checkbox color="pinky" />
  <Checkbox color="summer" />
  <Checkbox
</ThemeProvider>

如何自定义 MUI 中复选框的颜色？

`sx`道具

`color`道具

现场演示

相关答案

sx道具

color道具

现场演示

相关答案

`sx`道具

`color`道具