Skip to content

How to change MUI Radio button checked color?

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.

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.