javascript - 如何更改 Material UI 单选按钮选中的颜色？

Question

color 属性只能采用三个值(默认、主要、次要)，但是如果我希望我的 radio 是绿色的怎么办？

所以我尝试用 classes 属性覆盖，如下所示:

const styles = theme => ({
  radio: {
    colorPrimary: {
    '&$checked': {
      color: 'blue'
    }
  },
  checked: {},
  } 
})

然后在组件内部:

<FormControlLabel
   classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
   value="week"
   control={<Radio disableRipple classes={{colorPrimary: classes.radio}} />}
   label="Every week (Monday at 12:00)"
/>

但这不起作用。

Answer 1

找到解决方案:

const styles = theme => ({
  radio: {
    '&$checked': {
      color: '#4B8DF8'
    }
  },
  checked: {}
})

在组件内部:

<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)"
/>

您必须添加root key 。