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

Posted 2023-03-05

技术标签:

【中文标题】如何更改 MUI 单选按钮选中的颜色？【英文标题】：How to change MUI Radio button checked color? 【发布时间】：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)"
/>

但这不起作用。

【问题讨论】：

【参考方案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 单选按钮选中的颜色？

现场演示

相关答案