Question

我似乎找不到在Material UI MuiCheckbox

中更改刻度颜色的方法。

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

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

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一样。

Answer 2

实际上没有刻度的颜色设置。默认情况下，它采用背景色。

您可以将复选框包装在div中，在此div上加上背景色，然后将勾号涂上颜色。

Answer 3

如果您只想更改刻度线颜色，则必须使用以下技术。这是上面@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

在MuiCheckbox材质用户界面中更改刻度颜色

3 个答案: