如何在 MUI 中自定义复选框的颜色？

How can I customize the color of a Checkbox in MUI?

我在我的项目中使用 MUI，我在 div 中有一个 Checkbox，背景为黑色。但它看起来不太好，因为 Checkbox 也是黑色的。如何将 Checkbox 的颜色从黑色更改为另一种颜色？

可能是两种方法。

  1. "local"

CheckBox 有道具 labelStyle 和 iconStyle。 我想你可以从调整它们开始：

<Checkbox
  label="Custom icon"
  labelStyle={{color: 'white'}}
  iconStyle={{color: 'white'}}
/>

我不确定这是否足够所以你可能需要和其他 "Style" props of Checkbox 一起玩。检查名称中包含 "style" 的所有内容。

  1. 创建主题

您可以设置一些只会影响复选框的主题设置：

您可以使用 storybook-addon-material-ui 演示 page 创建您的主题并下载它。

您需要使用 iconStyle，但由于复选框图标是 SVG 图像，因此您需要使用 fill 而不是 color 来设置颜色：

https://jsfiddle.net/27Lmaz48/1/

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>

对我来说，我只需要更改 table header 复选框，这对我有用

.thsvg svg{
  fill: white !important;
}


<TableHeader
   className="thsvg"
    displaySelectAll={true}
    adjustForCheckbox={true}
    enableSelectAll={true}>
  <TableRow>     
    <TableHeaderColumn>Name</TableHeaderColumn>
  </TableRow>
</TableHeader>

这是一个老问题，但对于那些正在使用 material 1.2.

的人来说

iconStyle 不适合我。

但是，我通过覆盖现有主题并将 'Checkbox' 组件包装到一个新的主题来实现这一点。

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



const checkBoxStyles = theme => ({
    root: {
      '&$checked': {
        color: '#3D70B2',
      },
    },
    checked: {},
   })

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

现在您可以在渲染函数中使用 "CustomCheckbox" 组件了。

选中后，颜色应该是您指定的颜色。

这就是你的做法：

 <FormControlLabel  
                control={
                  <Checkbox
                    checked={cryon}
                    onChange={this.handleChange('cryon')}
                    style ={{
                      color: "#00e676",
                    }}
                    value="cryon"
                  />
                }
                label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
              />

复选框具有名为 color 的属性，它的值可以是 default 或 primary 或 secondary喜欢：

 <Checkbox
   onChange={doSth}
   value="checkedIncomplete"
   color="primary"
  />

您可以通过重写它们的 类 Css 以简单的方式更改主要颜色和次要颜色，其中主要颜色是：.MuiCheckbox-colorPrimary，次要颜色是：.MuiCheckbox-colorSecondary

因此您可以在 Css 中编辑：.MuiCheckbox-colorPrimary { color : 'yourColor'}

对我来说，这是通过添加 root 并检查分类来解决的 

const styles = () => ({
  root: {
    "&$checked": {
      color: "rgba(0, 0, 0, 0.54)"
    }
  },
  checked: {}
})

并将其传递到复选框 类 内 

<Checkbox
          checked={checked}
          classes={{
            root: classes.root,
            checked: classes.checked
          }}
          onChange={handleCheckBox}
        />

希望这对其他人有帮助

这在 material-ui 4.1 上对我有用。 在 Checkbox

上定义 color 属性，值为 ="primary" 
<Checkbox color="primary"...>

用原色覆盖 material-ui 的样式。将此条目添加到一个 css 文件中，该文件被导入到呈现 Checkbox.

的 javascript 代码中 
.MuiCheckbox-colorPrimary.Mui-checked {
color: #e82997 !important;
}

您可以为选中和未选中条件指定一个自定义图标，然后设置复选框图标的样式 例如： <Checkbox checkedIcon={<CustomIcon style={{color:'red'}}/>} icon={<CustomIcon/>} inputProps={{ 'aria-label': 'decorative checkbox' }} {...props} />

对于任何稍后来回答的人，
如果 labelStyle 和 iconStyle 不适合你
并且您希望以后能够更改颜色，请尝试以下操作：

const useStyles = makeStyles<Theme, {color: string}, "root">({
    root: {
        color: (props: {color: string}) => props.color,
    },
})

export default function ColoredCheckbox() {
     const styles = useStyles({color: "#whatevercoloryouwant"})
     return <Checkbox color="default" className={styles.root} />
}

你可以使用 material ui theme.

const theme = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      colorSecondary: {
        color: '#custom color',
        '&$checked': {
          color: '#custom color',
        },
      },
    },
  },
});

got it from here

在 MUI v5 中，有 2 种更好的方法来更改 Checkbox 颜色：

sx 道具

这对于一次性样式很有用，可以快速设置但仅适用于特定 Checkbox:

import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";

<Checkbox
  {...props}
  sx={{
    [`&, &.${checkboxClasses.checked}`]: {
      color: 'magenta',
    },
  }}
/>

color 道具

可以看到 answer for more detail. Basically the color prop of some components (e.g. Button, Checkbox, Radio,...) must be one of the colors from the Palette对象，可以根据自己的喜好扩展：

import { pink, yellow } from "@mui/material/colors";
import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";
import { createTheme, ThemeProvider } from "@mui/material/styles";

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

<ThemeProvider theme={theme}>
  {/* pre-defined color */}
  <Checkbox />
  <Checkbox color="secondary" />
  <Checkbox color="success" />
  <Checkbox color="default" />
  {/* custom color */}
  <Checkbox color="pinky" />
  <Checkbox color="summer" />
  <Checkbox
</ThemeProvider>

现场演示

相关回答

MUI 5 主题：

import { checkboxClasses } from '@mui/material/Checkbox';

export const muiTheme = createTheme({
    components: {
        MuiCheckbox: {
            styleOverrides: {
                root: {
                    color: 'blue',
                    [`&.${checkboxClasses.checked}`]: {
                        color: 'blue',
                    },
                },
            },
        },
    },
});