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.