Material UI disable checkbox hover

Question

I'm trying to disable round hover around Material UI Checkbox component. When Checkbox is not checked hover is disabled but I need to disable hover also when Checkbox is checked. Any tips how to do that?

Here is my Checkbox component:

<FormControlLabel
    control={
        <Checkbox
             className={classes.checkbox}
             icon={
                 <CheckBoxOutlineBlankIcon />
             }
             checkedIcon={
                 <CheckBoxIcon />
             }
        />
/>

And here is my styling. This removes hover when Checkbox is not checked but not when Checkbox is checked:

checkbox: {
    "&:hover": {
        backgroundColor: "transparent",
    },
},

Answer 1

You can style component with classes prop:

checkbox: {
    "&:hover": {
        backgroundColor: "transparent",
    }
},
checkedbox: {
   backgroundColor: "transparent",
}


<FormControlLabel
    control={
        <Checkbox
             classes={{ root: classes.checkbox, checked: classes.checkedbox}}
             icon={
                 <CheckBoxOutlineBlankIcon />
             }
             checkedIcon={
                 <CheckBoxIcon />
             }
        />
/>

Document here:

https://material-ui.com/api/checkbox/

https://material-ui.com/customization/components/#overriding-styles-with-classes

Answer 2

the hover effect comes from the IconButton component which is nested inside the checkbox. to disable this target the root class and add the background color with !important so as the hover effect of IconButton has a higher specificity.

<FormControlLabel
  control={
    <Checkbox
      disableRipple
      icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
      checkedIcon={<CheckBoxIcon fontSize="small" />}
      classes={{root:classes.root}}
    />
  }
  label="Custom size"
/>

const useStyles = makeStyles(() => ({
  root: {
    '&:hover': {
      backgroundColor: 'transparent !important'
    }
  }
}));

Here is the working demo :-