如何在 Material Design React 中禁用波纹答案

【问题标题】：How to disable ripple in Material Design React如何在 Material Design React 中禁用波纹
【发布时间】：2017-07-01 21:46:17
【问题描述】：

我说的是这个存储库。 https://github.com/callemall/material-ui

我想知道如何禁用所有组件的波纹效果。

谢谢。

【问题讨论】：

标签： reactjs material-design material-ui

【解决方案1】：

您可以通过将其添加到位于MUIThemeProvider 内部的最高级别 React 组件的 componentDidMount() 来禁用默认属性：

componentDidMount(){
  //Do this to all components you would like to disable the ripple effect.
  EnhancedButton.defaultProps.disableTouchRipple = true;
  EnhancedButton.defaultProps.disableFocusRipple = true;
}

【讨论】：

【解决方案2】：

根据Material-UI documentation，您可以通过在主题中提供以下内容来全局禁用涟漪效应：

import React from "react";

import Button from "@material-ui/core/Button";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";

export default function ContainedButtons() {
  const theme = createMuiTheme({
    props: {
      // Name of the component
      MuiButtonBase: {
        // The properties to apply
        disableRipple: true // No more ripple, on the whole application!
      }
    }
  });
  return (
    // You need to wrap your component with <MuiThemeProvider> tag
    <MuiThemeProvider theme={theme}>
      <div>
        <Button variant="contained" color="primary">
          Primary
        </Button>
      </div>
    </MuiThemeProvider>
  );
}

你可以查看这个working sample code。

【讨论】：

【解决方案3】：

对于关心如何在单个按钮上按按钮基础执行此操作的任何人，请务必将disableRipple 属性应用于您关心的单个按钮以禁用涟漪效应。

例如

import {Button, IconButton} from '@material-ui/core';
function RiplelessButtonSampleComponent(props)
{
   return (
            <div>
               <strong>Icon Button</strong>
               <IconButton disableRipple onClick={this.showModal} variant="text" color="primary">
                  <i className="fal fa-chevron-right" />
               </IconButton>

               <strong>Standard Button</strong>

               <Button disableRipple onClick={this.showModal} variant="text" color="primary">
                  Click Me for No effect
               </Button>
            </div>
   )
}

【讨论】：

【解决方案4】：

这是MUI v5 way

import { createTheme } from '@mui/material';

const theme = createTheme({
  components: {
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },
  },
});

【讨论】：

【解决方案5】：

在针对 React Material UI 的情况下搜索相同问题的解决方案时，如果有人像我一样偶然发现此页面，从 React MaterialUI Button 组件中删除波纹的快速方法是添加“disableRipple”属性。

<Button disableRipple>Button Caption</Button>

附：我正在使用@material-ui/core 版本 4.5.1

【讨论】：

而且，如果您使用的是ButtonGroup，您只想将其放在ButtonGroup 标记上并继承子按钮。