The color prop can only take three values (default, primary, secondary) but what if I want my radio to be green for example ?
So I tried overriding with classes prop like so :
const styles = theme => ({
radio: {
colorPrimary: {
'&$checked': {
color: 'blue'
}
},
checked: {},
}
})
And then inside the component :
<FormControlLabel
classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
value="week"
control={<Radio disableRipple classes={{colorPrimary: classes.radio}} />}
label="Every week (Monday at 12:00)"
/>
But this is not working.
Advertisement
Answer
Found a solution :
const styles = theme => ({
radio: {
'&$checked': {
color: '#4B8DF8'
}
},
checked: {}
})
And inside the component:
<FormControlLabel
classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
value="day"
control={
<Radio
disableRipple
classes={{root: classes.radio, checked: classes.checked}}
/>
}
label="Every Day (at 12:00)"
/>
You must add the root key.