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

Posted 2023-02-21

【中文标题】Material UI：更改未选中单选按钮的颜色

【英文标题】：Material UI: Change color of unchecked radio button

【发布时间】：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>

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

有什么建议吗？

【参考方案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（如果有的话）而不是解决方法来做到这一点。