如何在Material-UI按钮上禁用长按效果？

Question

我有一个带有图标的按钮，长按它会在图标周围创建一个不期望的效果，请问如何删除这个动作？

import React from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import ViewListIcon from "@material-ui/icons/ViewList";

function App() {
  return (
    <div>
      <Button style={{ MuiButtonBase: { disableRipple: true } }}>
        <ViewListIcon />
      </Button>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

CodeSandbox

- Richardson900k

---

我认为你在谈论涟漪效果。要禁用涟漪效果，你需要将 disableRipple 属性传递给 Button 组件（不是作为样式）。这里是 Button 组件可用属性的 API。更新后的 sandbox。 - Junaid Faryad

please submit an answer. - Richardson

这个回答解决了你的问题吗？如何在Material Design React中禁用涟漪效果 - NearHuscarl

上面评论中的这个链接有更好的答案。 - Junaid Faryad

Answer 1

在 Button 中增加 disableRipple 属性。

<Button disableRipple>
  <ViewListIcon />
</Button>

- Hamidreza

---

此答案因质量低被标记，请提供更多支持信息和解释以改善答案。 - Noam Yizraeli

Answer 2

根据文档，MUI按钮（例如Button或IconButton）上的disableRipple属性可禁用涟漪效果。请注意保留HTML标签。

<Button disableRipple>
  <ViewListIcon />
</Button>

默认情况下，在matRipple指令的宿主元素接收到鼠标或触摸事件时，会激活涟漪效果。当被按下时，涟漪将从接触点开始淡入，辐射覆盖宿主元素。每个涟漪仅在释放鼠标或触摸时才会淡出。

如果没有涟漪效果，默认情况下不会对:focus-visible进行样式设置。请务必通过应用.Mui-focusVisible类的单独样式来突出显示元素。

了解更多信息： 涟漪效果。

- Константин Ушаков