如何在 Material UI 中禁用 IconButton 波纹效果？答案

【问题标题】：How to disable IconButton ripple effect in Material UI?如何在 Material UI 中禁用 IconButton 波纹效果？
【发布时间】：2020-03-06 13:17:04
【问题描述】：

我有一个带有 IconButton 的 AppBar。悬停按钮时，它会在其中显示一个椭圆形悬停。我试图通过提供

来禁用它

disableFocusRipple={true}

但它不起作用。请帮助我。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用属性disableRipple。如果为 true，它将禁用涟漪效应。 disableFocusRipple 仅在 disableRipple 为真时有效。但是你有一个价格。你失去了一些状态风格。查看 API 文档。 https://material-ui.com/api/button/

【讨论】：

我尝试在 IconButton disableRipple={true} disableFocusRipple={true} disableTouchRipple={true} 中给出这三个，但这对我不起作用
请查看此代码笔：codesandbox.io/s/quizzical-wilbur-ee1yu
在那个例子中，通过给予，这个..我仍然可以看到涟漪。它没有删除
我在 Chrome、IE 和 FF 上看不到它。你能提供你的material-ui版本吗？我正在使用 4.9.5。
嘿，您需要的不仅仅是涟漪。您需要在悬停时删除样式。这是另一种状态。在这种情况下，将背景设置为透明。检查代码笔

【解决方案2】：

由于某种原因，disableRipple 属性对我不起作用，但我能够通过将悬停背景颜色设置为透明来禁用 IconButton 上的波纹效果。

代码：

<IconButton className={classes.disableRipple} aria-label="View">
  <InfoIcon/>
</IconButton>

然后像这样设置它的样式（或任何其他你想要设置样式的方式，可以是内联的）：

const useStyles = makeStyles(() => ({
  disableRipple: {
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
}));

【讨论】：

这个答案与当前的mui/material 版本^5.0.0 相关。这两个道具似乎有问题，一个好的解决方法是使用 backgroundColor 禁用它

【解决方案3】：

波纹是点击或聚焦时发生的动画（我认为默认情况下不是）。您正在寻找的是悬停背景颜色。您应该能够通过覆盖 css 来取消设置颜色：

.MuiButtonBase-root:hover {
        background-color: unset;
    }

【讨论】：