reactjs - Material UI 禁用复选框悬停

Question

我正在尝试禁用 Material UI Checkbox 组件周围的圆形悬停。当未选中复选框时，悬停被禁用，但我也需要在选中复选框时禁用悬停。有什么技巧可以做到这一点吗？

这是我的复选框组件:

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

这是我的造型。这会在未选中复选框时删除悬停，但在选中复选框时不会删除悬停:

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

Answer 1

悬停效果来自嵌套在复选框内的 IconButton 组件。要禁用此目标，请使用根类并使用 !important 添加背景颜色，以便 IconButton 的悬停效果具有更高的特异性。

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

这是工作演示:-