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

Question

我正在尝试制作 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。

Answer 1

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

如果对样式进行相应的更改，则效果很好：

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

Answer 2

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

<块引用>

变化不顺

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

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

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

现场演示