如何禁用Material-UI Button组件的长按触发特效

你遇到的长按异常效果是Material-UI默认的水波纹交互效果，你当前将禁用配置写在style属性中属于写法错误，MuiButtonBase.disableRipple是组件属性/全局主题配置项，无法通过内联样式生效。

方案1：单个Button组件禁用（最简便） #

直接给Button组件添加disableRipple原生属性即可，修改后的代码如下：

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>
      {/* 直接添加disableRipple属性 */}
      <Button disableRipple>
        <ViewListIcon />
      </Button>
    </div>
  );
}

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

方案2：全局禁用所有Button的水波纹效果 #

如果需要项目内所有Button都默认禁用长按水波纹，可以通过主题配置统一生效：

import React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import Button from "@material-ui/core/Button";
import ViewListIcon from "@material-ui/icons/ViewList";

// 配置全局主题
const theme = createTheme({
  components: {
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true, // 所有继承ButtonBase的组件都禁用水波纹
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button>
          <ViewListIcon />
        </Button>
      </div>
    </ThemeProvider>
  );
}

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

内容的提问来源于stack exchange，提问作者Richardson