Change the tick color in MuiCheckbox material UI

Question

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,

Answer 1

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>
  );
}

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.

Answer 2

There is actually no color settings for the tick. It takes the color of the background by default.

You can wrap your checkbox in a div, put a background color on this div and the tick should be colored.