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

问题描述

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

I can't seem to find a way to change the tick color in Material UI MuiCheckbox

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

All the Demos show how to change the color of the whole checkbox, but in all of them, the tick is white.

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

How can I change the color of the tick only?

推荐答案

下面是一种可行的方法.该方法的要点是创建一个框(通过:after伪元素)，该框略小于用于检查的图标，并具有所需的颜色作为背景色.然后将该框放在选中"图标的后面.

Below is an approach that seems to work. The gist of the approach is to create a box (via the :after pseudo-element) that is slightly smaller than the icon for the check and has the desired color as the background color. Then place that box behind the "checked" icon.

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属性使用该图标，如示例中的自定义图标示例.

An alternative approach would be to create a custom icon that includes the desired color for the check and then use it via the checkedIcon property as in the Custom icon example in the demos.

这篇关于在MuiCheckbox材质用户界面中更改刻度颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！