How to disable ripple in Material Design React

Question

I am talking about this repository. https://github.com/callemall/material-ui

I want to know how to disable the ripple effect from all components.

Thanks.

Answer 1

For anyone that cares about how to do so on an individual button by button bases, be sure to apply the disableRipple property to the individual button you care to disable the ripple effect for.

for example

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 2

According to Material-UI documentation, you can disable the ripple effect globally by providing the following in your theme:

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

You can check this working sample code.

Answer 3

You can disable the default property by adding this to componentDidMount() at the highest level React component that is inside of the MUIThemeProvider:

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