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,
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 (
}
label="Custom check color"
/>
);
}
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.