更改材质 ui IconButton 悬停样式不起作用答案

【问题标题】：Changing material ui IconButton hovered style doesn't work更改材质 ui IconButton 悬停样式不起作用
【发布时间】：2021-03-23 14:31:30
【问题描述】：

我正在尝试制作 IconButton 的自定义悬停样式，我正在这样做

const useStyles = makeStyles((theme) => ({
  root: {
    "&:hover": {
      borderRadius: "4px",
      padding: "3px",
    },
  },
}));

return (
  <div className="App">
    <IconButton aria-label="previous" className={classes.root}>
      <ArrowLeftIcon />
    </IconButton>
  </div>
);

但是当我将它悬停时，它会闪烁并且变化不顺畅。我想我缺少一些要添加的样式，但是我找不到我做错的方法。您可以查看我的代码框示例here。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果您查看default styles for IconButton，您会发现borderRadius 和padding 直接设置在根样式中。只有backgroundColor 会在悬停时发生变化。

如果您对样式进行了相应的更改，那么它就可以正常工作：

const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: "4px",
    padding: "3px"
  }
}));

【讨论】：

【解决方案2】：

它在悬停时闪烁，因为 padding（其内容和边框之间的空间）被修改了。删除padding 或将其置于默认样式。

变化不大

这可以通过使用 css 转换轻松解决。 Material-UI theme 有一个实用方法theme.transition.create() 可以帮助您快速创建过渡。

const useStyles = makeStyles((theme) => ({
  root: {
    transition: theme.transitions.create(["border-radius"]),
    // padding: 3;

    "&:hover": {
      borderRadius: "4px"
    }
  }
}));

现场演示

【讨论】：