reactjs - 更改 MuiCheckbox Material UI 中的勾选颜色

Question

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

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

如何只改变勾号的颜色？

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 属性使用它，如 Custom icon example在演示中。