如何更改 MUI 单选按钮选中的颜色？

Question

color 只能取三个值（默认值、主要值、次要值）但是如果我想让我的收音机变成绿色怎么办？

所以我尝试用 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)"
/>

但这是行不通的。

原文由 e_netr 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 密钥。

原文由 e_netr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于项目范围的主题，我有一个不同的解决方案。

 const theme = {
  overrides: {
    MuiRadio: {
      root: {
        color: 'green',
      },
      colorSecondary: {
        '&$checked': {
          color: 'green',
        },
      },
    },
  },
},

const muiTheme = createMuiTheme(theme)

<ThemeProvider theme={muiTheme}>
  // rest of app goes here
</ThemeProvider>

这样，应用程序中的所有 Material-UI Radio 元素都有一个绿色的外圈，并且在选中时也是一个绿色的圈。

原文由 Kevin Ashworth 发布，翻译遵循 CC BY-SA 4.0 许可协议