Change the tick color in MuiCheckbox material UI

后端 未结 2 1565
孤城傲影
孤城傲影 2020-12-21 14:13

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,

2条回答
  •  一整个雨季
    2020-12-21 14:43

    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.

提交回复
热议问题