reactjs - 更改 MuiCheckbox 材质 UI 中的刻度颜色

Question

我似乎找不到更改 Material UI MuiCheckbox中刻度颜色的方法

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

如何仅更改刻度线的颜色？

标签： reactjsmaterial-ui

Answer 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属性使用它，如演示中的自定义图标示例中所示。