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

Posted

技术标签:

【中文标题】如何自定义 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 有属性 labelStyleiconStyle。 我想你可以从调整它们开始:

<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 的属性,它的值可以是 defaultprimarysecondary,例如:

 <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 文件中,该文件将导入到呈现 Checkboxjavascript 代码中。

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

【讨论】:

【参考方案9】:

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

【讨论】:

【参考方案10】:

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

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 属性(例如ButtonCheckboxRadio、...)必须是来自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>

现场演示

相关答案

How to add custom MUI palette colors

【讨论】:

以上是关于如何自定义 MUI 中复选框的颜色?的主要内容,如果未能解决你的问题,请参考以下文章

mui拍照后如何保存到自定义目录中?mui代码如何建文件夹?

如何在 MUI 中应用自定义动画效果@keyframes?

MUI框架-03-自定义MUI控件样式

如何使用自定义钩子在 MUI v5 中处理 AutoComplete onChange

如何在 AppBar Title MUI 中应用不同的颜色?

选中时尝试更改自定义复选框标签的颜色,仅 CSS [重复]