如何在Material Design React中禁用波纹

Question

我在谈论这个存储库. https://github.com/callemall/material-ui

我想知道如何禁用所有组件的涟漪效应.

谢谢.

Answer 1

这是MUI v5 的方式

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

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

Answer 2

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

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

您可以检查此工作示例代码。

Answer 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>
   )
}

Answer 4

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

<Button disableRipple>Button Caption</Button>

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

Answer 5

您可以通过将此属性添加到componentDidMount()中的最高级别的React组件来禁用默认属性MUIThemeProvider:

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