更改 MuiCheckbox 材质 UI 中的刻度颜色答案

【问题标题】：Change the tick color in MuiCheckbox material UI更改 MuiCheckbox 材质 UI 中的刻度颜色
【发布时间】：2019-09-17 08:50:17
【问题描述】：

我似乎无法在 Material UI MuiCheckbox987654321@中找到改变刻度颜色的方法

所有的 Demo 都展示了如何改变整个复选框的颜色，但在所有的例子中，勾号都是白色的。

我怎样才能只改变刻度的颜色？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

以下是一种似乎可行的方法。该方法的要点是创建一个框（通过:after 伪元素），该框略小于检查图标，并具有所需的颜色作为背景颜色。然后将该框放在“已选中”图标的后面。

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

const CheckboxWithGreenCheck = withStyles({
  root: {
    "&$checked": {
      "& .MuiIconButton-label": {
        position: "relative",
        zIndex: 0
      },
      "& .MuiIconButton-label:after": {
        content: '""',
        left: 4,
        top: 4,
        height: 15,
        width: 15,
        position: "absolute",
        backgroundColor: "lightgreen",
        zIndex: -1
      }
    }
  },
  checked: {}
})(Checkbox);

export default function CheckboxLabels() {
  const [state, setState] = React.useState({
    checkedA: true,
    checkedB: false
  });

  const handleChange = name => event => {
    setState({ ...state, [name]: event.target.checked });
  };

  return (
    <FormGroup>
      <FormControlLabel
        control={
          <CheckboxWithGreenCheck
            checked={state.checkedA}
            onChange={handleChange("checkedA")}
            value="checkedA"
            color="primary"
          />
        }
        label="Custom check color"
      />
    </FormGroup>
  );
}

另一种方法是创建一个包含支票所需颜色的自定义图标，然后通过 checkedIcon 属性使用它，就像演示中的 Custom icon example 一样。

【讨论】：

总结了一切，感谢您提供多个选项以及答案的清晰性:)

【解决方案2】：

如果您只想更改刻度颜色，则必须使用以下技术。这是上面@Ryan 的增强版。

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

const CheckboxWithGreenCheck = withStyles({
  root: {
    "& .MuiSvgIcon-root": {
      fill: "white",
      "&:hover": {
        backgroundColor: "white"
      }
    },
    "&$checked": {
      "& .MuiIconButton-label": {
        position: "relative",
        zIndex: 0,
        border: "1px solid #bbbbbb",
        borderRadius: 3
      },
      "& .MuiIconButton-label:after": {
        content: '""',
        left: 4,
        top: 4,
        height: 15,
        width: 15,
        position: "absolute",
        backgroundColor: "green",
        zIndex: -1,
        borderColor: "transparent"
      }
    },
    "&:not($checked) .MuiIconButton-label": {
      position: "relative",
      zIndex: 0,
      border: "1px solid #bbbbbb",
      borderRadius: 3
    },
    "&:not($checked) .MuiIconButton-label:after": {
      content: '""',
      left: 4,
      top: 4,
      height: 15,
      width: 15,
      position: "absolute",
      backgroundColor: "white",
      zIndex: -1,
      borderColor: "transparent"
    }
  },
  checked: {}
})(Checkbox);

export default function CheckboxLabels() {
  const [state, setState] = React.useState({
    checkedA: true,
    checkedB: false
  });

  const handleChange = (name) => (event) => {
    setState({ ...state, [name]: event.target.checked });
  };

  return (
    <FormGroup>
      <FormControlLabel
        control={
          <CheckboxWithGreenCheck
            checked={state.checkedA}
            onChange={handleChange("checkedA")}
            value="checkedA"
          />
        }
        label="Custom check color"
      />
    </FormGroup>
  );
}

https://codesandbox.io/s/checkbox-custom-check-color-forked-k3kw2?file=/demo.js

【讨论】：

【解决方案3】：

实际上对勾没有颜色设置。它默认采用背景颜色。

您可以将您的复选框包装在一个 div 中，在此 div 上添加背景颜色，然后对勾进行着色。

【讨论】：

你能给我一个带有 MuiCheckbox 的代码示例吗？带标签
将复选框包裹在一个 div 中会使颜色区域过大 -- 除了勾号之外，它还会为复选框图标周围的区域着色。