How can I customize the color of a Checkbox in material-ui
You need to use the iconStyle
, but since the checkbox icon is an SVG image, you need to set the color using fill
instead of color
:
https://jsfiddle.net/27Lmaz48/1/
<Checkbox label='My checkbox'
labelStyle={{color: 'white'}}
iconStyle={{fill: 'white'}}
/>
This is how you do it:
<FormControlLabel
control={
<Checkbox
checked={cryon}
onChange={this.handleChange('cryon')}
style ={{
color: "#00e676",
}}
value="cryon"
/>
}
label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
/>
It's an old question, but for those who are using material 1.2.
The iconStyle is not working for me.
However, I achieved this by overwriting the existing theme and wrap the 'Checkbox' component to a new one.
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);
Now you can use the "CustomCheckbox" component in render function.
And when it's checked , the color should be the one you assigned.