如何在材料中自定义复选框的颜色-ui

Question

我在我的项目中使用material-ui,并且我在一个黑色背景的div中有一个Checkbox.但它看起来不太好,因为Checkbox也是黑色的.如何将Checkbox的颜色从黑色更改为另一种颜色？

Answer 1

这是你如何做到的：

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

Answer 2

您需要使用iconStyle,但由于复选框图标是SVG图像,您需要使用fill而不是设置颜色color:

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

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

Answer 3

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

sx支柱

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

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

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

color支柱

您可以查看此答案以了解更多详细信息。基本上，color某些组件（例如，，，...）的 propButton必须Checkbox是对象Radio的颜色之一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 调色板颜色

Answer 4

You could use material ui theme.

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

got it from here

Answer 5

这是一个老问题，但是对于那些正在使用材料1.2的人来说。

iconStyle对我不起作用。

但是，我通过覆盖现有主题并将“复选框”组件包装到一个新主题中来实现。

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”组件。

选中后，颜色应为您分配的颜色。

Answer 6

对我来说，这是通过添加 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}
        />

希望这会帮助其他人