Material ui 如何自定义材质ui中复选框的颜色

我正在我的项目中使用，并且在一个具有黑色背景的div中有一个复选框。但是它看起来不好，因为复选框也是黑色的。如何将复选框的颜色从黑色更改为其他颜色？

可能有两种方法

“本地”

复选框具有道具

labelStyle

和

iconStyle

。 我想你可以从调整它们开始：

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

我不确定这是否足够，所以你可能需要玩其他的“风格”。签出所有名称中有“样式”的内容

创建主题

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

---

您可以使用

storybook附加材料ui

demo来创建主题并下载它。

您需要使用

iconStyle

，但由于复选框图标是SVG图像，因此您需要使用

fill

而不是

color

来设置颜色：

---

对于我来说，我只需要更改表格标题复选框，这对我很有效

.thsvg svg{
  fill: white !important;
}


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

.thsvg{
填充：白色！重要；
}
名称

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

iconStyle不适合我

然而，我通过覆盖现有主题并将“Checkbox”组件包装成一个新组件来实现这一点

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”组件

当选中时，颜色应该是您指定的颜色

这是您的操作方式：

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

---

复选框有一个名为color的属性，它可以有default或primary或secondary的值，如：

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

您可以通过重写它们的类Css以简单的方式更改主颜色和次颜色，主颜色为：

.MuiCheckbox colorPrimary

，次颜色为：

.MuiCheckbox colorpsecondary

---

因此，您可以在Css中编辑：

.MuiCheckbox colorPrimary{color:'yourColor'}

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

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

并在checkbox的类中传递它

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

---

希望这能帮助其他人

这在材料ui 4.1上对我很有用。 使用值=

在
复选框上定义
color
属性

<Checkbox color="primary"...>

您可以为“选中”和“未选中”条件指定自定义图标，然后设置复选框图标的样式
例如：
对于稍后前来寻求答案的任何人，

如果
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} />
}

const useStyles=makeStyles({
根目录：{
颜色：（props:{color:string}）=>props.color，
},
})
导出默认函数ColoredCheckbox（）{
const styles=useStyles（{color:#你想要什么颜色？}）
返回
}
您可以使用

谢谢@Oleg。我试过“inputStyle”、“iconStyle”、“labelStyle”和“style”labelStyle'确实会更改标签文本的颜色，但它们都不会更改复选框的颜色。这是你的电话号码。我认为“本地”解决方案是我所需要的，因为我希望使用默认样式保留我的其他复选框。嘿，Oleg，谢谢你。我一直在互联网上寻找MaterialUI中每个元素的属性来设计我的主题，但似乎找不到完整的文档。material ui网站没有此功能。我从不同的地方收集了一些按钮和开关等。是否有一个地方可以获取所有元素的完整属性列表，包括如何设置自定义元素？谢谢你使用十六进制颜色而不是命名颜色？如果有一件事我可以责怪MaterialUI的话，那就是他们的网站上缺少示例。。它充满了工作示例，但它们从未显示原始代码..材质ui使用的是哪个版本？我认为这个答案对于材质ui 4.11.3来说已经过时了。我喜欢这个解决方案，因为它很容易应用，并且会影响选中和未选中的颜色。与材质ui 4.8.0配合使用
.MuiCheckbox-colorPrimary.Mui-checked {
color: #e82997 !important;
}

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} />
}

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