Reactjs 更改材质ui图标按钮悬停样式不会'；行不通

我正在尝试创建自定义悬停样式的

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

const useStyles=makeStyles（（主题）=>({
根目录：{
“&：悬停”：{
边界半径：“4px”，
填充：“3px”，
},
},
}));
返回(
.
如果查看，您会发现
边框半径
和
填充
直接在根样式中设置。只有
背景颜色
在悬停时更改

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

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

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

变化不平稳

这可以通过使用css transition轻松解决。材质UI有一个实用方法
theme.transition.create（）
，可以帮助您快速创建过渡

const useStyles=makeStyles（（主题）=>({
根目录：{
过渡：主题。过渡。创建（[“边界半径]），
//填充：3；
“&：悬停”：{
边界半径：“4px”
}
}
}));

现场演示