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

Posted 2023-02-22

技术标签:

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

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

【问题讨论】：

【参考方案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`道具

现场演示

相关答案

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

sx道具

color道具

现场演示

相关答案

`sx`道具

`color`道具