如何自定义 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 有属性 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>
现场演示
相关答案
How to add custom MUI palette colors【讨论】:
以上是关于如何自定义 MUI 中复选框的颜色?的主要内容,如果未能解决你的问题,请参考以下文章
mui拍照后如何保存到自定义目录中?mui代码如何建文件夹?
如何使用自定义钩子在 MUI v5 中处理 AutoComplete onChange