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

【问题标题】：How to change MUI Radio button checked color?如何更改 MUI 单选按钮选中的颜色？
【发布时间】：2018-11-20 20:24:34
【问题描述】：

color 属性只能取三个值（默认值、主要值、次要值），但是如果我希望我的收音机例如是绿色的呢？

所以我尝试像这样使用classes prop 覆盖：

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

但这不起作用。

【问题讨论】：

标签： javascript reactjs radio-button material-ui

【解决方案1】：

我认为您需要使用 colorSecondary 类键而不是 colorPrimary，因为单选按钮的默认颜色为 secondary

您还可以使用根组件中的 createMuiTheme 和 MuiThemeProvider 组件覆盖主要和次要颜色的默认值，您可以

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] }, // Purple and green play nicely together.
    secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
  },
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">Primary</Button>
        <Button color="secondary">Secondary</Button>
      </div>
    </MuiThemeProvider>
  );
}

export default App;

正如您在下面的示例中看到的那样，您只需使用 MuiThemeProvider 包装您的组件，现在每个组件都将具有新的主要颜色和次要颜色

查看 material-ui 网站上的此链接以获取更多信息 Themes

【讨论】：

你能提供一个 colorSecondary 类的例子吗？
将 colorPrimary 更改为 colorSecondary
这不起作用我也尝试使用 checked 类
好的，您现在可以使用 MuiThemeProvider 并更改主要和次要的默认颜色

【解决方案2】：

找到了解决办法：

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 键。

【讨论】：

可能只是我很傻，但对于其他有此问题的人...$checked 是对下面定义的本地规则checked: {} 的反向引用。因此，如果checked 键是radioChecked，那么您上面的规则必须反映这一点，即&$radioChecked: ...

【解决方案3】：

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

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 元素的外圈都是绿色的，勾选时里面也是绿圈。

【讨论】：

【解决方案4】：

对于希望使用样式化组件进行此操作的任何人

import { withStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';

const CssRadio = withStyles({
    colorSecondary: {
        color: '#FFFFFF',
        '&$checked': {
            color: 'hotpink',
          },
    },
    checked: {}
})(Radio)

【讨论】：

【解决方案5】：

您可以使用 MUI v5 中的 sx 属性设置选中和取消选中状态的样式，如下所示：

<Radio
  {...props}
  sx={{
    '&, &.Mui-checked': {
      color: 'magenta',
    },
  }}
/>

如果你想在color prop 中使用自定义颜色，可以在createTheme() 中扩展调色板：

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    pinky: palette.augmentColor({ color: pink }),
    summer: palette.augmentColor({ color: yellow }),
  },
});

然后在你的组件中这样使用它：

{/* pre-defined color */}
<Radio {...props} />
<Radio {...props} color="secondary" />
<Radio {...props} color="success" />
<Radio {...props} color="default" />
{/* custom color */}
<Radio {...props} color="pinky" />
<Radio {...props} color="summer" />

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

现场演示

相关答案