材质 UI 禁用复选框悬停答案

【问题标题】：Material UI disable checkbox hover材质 UI 禁用复选框悬停
【发布时间】：2021-01-21 11:15:01
【问题描述】：

我正在尝试禁用 Material UI Checkbox 组件周围的圆形悬停。当复选框未选中时，悬停被禁用，但我也需要在选中复选框时禁用悬停。任何提示如何做到这一点？

这是我的 Checkbox 组件：

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

这是我的样式。这会在未选中 Checkbox 但未选中 Checkbox 时移除悬停：

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

【问题讨论】：

意味着你完全想从复选框中删除悬停，对吧？
是的。我没有从文档中找到任何道具，并且样式仅在未选中时才会删除悬停。

标签： reactjs material-ui

【解决方案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'
    }
  }
}));

这是工作演示：-

【讨论】：

无需大刀阔斧，'&&:hover' 就是您所需要的全部特性
这个有效！还发现您不必定位根元素，只需 !important 就足以解决我的问题。
@hotpink 这个解决方案也有效，实际上我最终使用了它。谢谢！
@Arttu className 始终以 root 为目标，在定位嵌套元素或伪选择器时只需要 classes
ampersand 总是指父选择器，所以你最终得到的不是.makeStyles-root-1:hover，而是.makeStyles-root-1.makeStyles-root-1:hover，它具有更高的特异性。不确定这是在哪里明确记录的

【解决方案2】：

您可以使用 classes 属性设置组件样式：

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


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

文档在这里：

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

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

【讨论】：

它不工作。还尝试将鼠标悬停在“&:checked”中，但它也不起作用。
您需要使用带有checked 规则名称的类道具，请参阅我的更新答案