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

Question

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

原文由 kellyxiepei 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Jeff McCloud 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是你如何做的：

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

原文由 Hitesh Sahu 发布，翻译遵循 CC BY-SA 4.0 许可协议