Question

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

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

感谢。

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

Answer 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 。

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

如何在Material Design React中禁用波纹

3 个答案: