Material UI：更改未选中单选按钮的颜色答案

【问题标题】：Material UI: Change color of unchecked radio buttonMaterial UI：更改未选中单选按钮的颜色
【发布时间】：2021-06-14 17:12:06
【问题描述】：

在我的 React 应用程序中，我使用 Material UI 单选按钮，我想将它们的颜色更改为我的自定义主题颜色。为此，我正在使用来自“@material-ui/core/styles”的 ThemeProvider。所以这里是主题对象

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#F6A500',
            light: '#F6A500',
            dark: '#F6A500',
        },
    }
});

这就是我的使用方法。

<ThemeProvider theme={theme}>
    <RadioGroup value={sourceOption} onChange={(e, v) => setSourceOption(v)} row>
        <FormControlLabel value="0" control={<Radio color="primary" />} label="Mobilni" />
        <FormControlLabel value="1" control={<Radio color="primary" />} label="Web" />
        <FormControlLabel value="2" control={<Radio color="primary" />} label="Svi" />
    </RadioGroup>
<ThemeProvider>

问题是，颜色仅应用于选中的单选按钮，而不应用于其他按钮。

有什么建议吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你可以通过改变单选按钮根类名的颜色属性来修改单选按钮的颜色，如下所示：

const GreenRadio = withStyles({
  root: {
    color: green[400],
    "&$checked": {
      color: green[600]
    }
  },
  checked: {}
})((props) => <Radio color="default" {...props} />);



<GreenRadio
        checked={selectedValue === "c"}
        onChange={handleChange}
        value="c"
        name="radio-button-demo"
        inputProps={{ "aria-label": "C" }}
      />

sandbox

【讨论】：

我想你的回答可以解决问题，但我很好奇使用 ThemeProvider（如果有的话）而不是解决方法来做到这一点。