如何更改Material-ui单选按钮选中的颜色？

Question

该color道具只能接受三个值（默认值，主要值，次要值），但是如果我想让收音机为绿色怎么办？

所以我尝试用classesprop 覆盖如下：

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

但这是行不通的。

Answer 1

您可以使用MUI v5sx中的 prop来设置选中和取消选中状态的样式，如下所示：

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

如果您想在colorprop 中使用自定义颜色，您可以在以下位置扩展调色板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 调色板颜色

Answer 2

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

您还可以使用根组件中的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包裹你的组件， 现在每个组件都会有新的主要和次要颜色

检查从原材料的UI网站此链接以获取更多信息 的主题

Answer 3

找到了解决方案：

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

Answer 4

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

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 元素都有一个绿色的外圈，并且在选中时内部也是一个绿色的圆圈。