Material-ui: Disable ripple animation

[marconi]

I'm trying to use on a phonegap app and it turns out the ripple animation doesn't work, I know I can disable per component via disableFocusRipple and disableTouchRipple, but is there a global way of doing this?

Also, would you say the current state is even ready for mobile? WebView in particular can be very limiting at times.

Thanks

[killfill]

Im curious.. did you hit this when trying phonegap on android?
https://github.com/zilverline/react-tap-event-plugin/pull/3

[marconi]

@killfill sorry didn't notice, probably because I was running on emulator.

[ericfong]

How can I disable the animation?

global or by component?

doc or api please. thanks

[plainspace]

try .mui-ripple-circle {display: none}

via @tschaub

[luisrudge]

Thanks. I really don't like the animation

[lehovec]

You can globally deny ripple animation with hack by setting default value for EnhancedButton or other component:

EnhancedButton.defaultProps.disableTouchRipple = true;
EnhancedButton.defaultProps.disableFocusRipple = true;

[tomaszczechowski]

It's a hack, however, works:

.mat-ripple-element {
    display: none;
}

[ingaropolous]

This works for me "disableRipple" inside propertie

[JonAbrams]

I was looking into disabling the ripple globally with material-ui-next and couldn't find anything, so after some source spelunking I found a solution. Add this hack somewhere to your project:

import TouchRipple from 'material-ui/ButtonBase/TouchRipple';

TouchRipple.prototype.render = () => null;

[oliviertassinari]

@JonAbrams This is a good monkey patch 👍. You should be able to rely on #10671 in the next release (v1.0.0-beta.38).

[JonAbrams]

@oliviertassinari
Thanks for the "props" on the monkey patch and the props on the theme in #10671!

[ryanpcmcquen]

disableTouchRipple={true} does not work with an icon in my experience.
Example sandbox:
https://codesandbox.io/s/3r82644prq

Inside CompareBar.js:

{sku.length ? (
    <Badge
        data-sku={sku}
        badgeContent={<CancelIcon />}
        onClick={(event, checked) => {
            props.dispatch(
                actionRemoveProduct(sku)
            );
        }}
    >
        <img
            alt={sku}
            src={product.image}
            style={{
                height: '50px',
                width: '50px'
            }}
        />
    </Badge>
) : (
    <AddBoxIcon
        disableTouchRipple={true}
        disableFocusRipple={true}
        style={{ fontSize: 50 }}
    />
)}

[oliviertassinari]

@ryanpcmcquen Applying disableTouchRipple on an icon doesn't make sense. An icon doesn't have the ripple effect.

[ryanpcmcquen]

The ripple was coming from the wrapping BottomNavigationAction. The fix was programmatically applying disableRipple to the BottomNavigationAction.

[wongjiahau]

@JonAbrams Nice patch, especially for those who are still using the old MUI version (around v1.0.0~)

[oliviertassinari]

If you want to disable the ripple globally, you can do as such:

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButtonBase: {
      // The properties to apply
      disableRipple: true, // No more ripple, on the whole application 💣!
    },
  },
});

https://material-ui.com/customization/themes/#properties

[wongjiahau]

@oliviertassinari Mind telling from which version onwards we can do that?

[oliviertassinari]

@wongjiahau v3.x for sure.

[YLemelin09]

I know this question will not be about disabling the ripple but how can i change the color of the ripple effect while keeping my label color? the one stackoverflow answer about it doesnt seem to work

[richardaum]

Is there any way to replace the ripple effect for something on CSS, globally?

[oliviertassinari]

@richardaum I'm not sure to understand your objective. But yeah, you can customize the button-base, globally. You have multiple options. I would try them in the following order:

• Use the theme.overrides.MuiButtonBase.root feature.
• Change the CSS class name generation to output deterministic class names (we have a boolean option for that).
• Wrap all the button components.

[adueck]

@oliviertassinari How would I do something like that but to remove the ripple underling animation on the (text) input select

This doesn't work... (doesn't have those props...) Is there any option to turn off the animation on the text inputs? (I don't want the animation that ripples out from the middle on select)

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiInputBase: {
      // This doesn't work/exist...
      disableRipple: true, // 😢 
    },
  },
});

I don't want to disableUnderline. I just want to not have the animation on select. Is there an option for this? Or do I have to go in an override with classes?

[oliviertassinari]

@adueck You can do theme.overrides.MuiInput.underline['&:after'].transition = 'none' or

.MuiInput-underline:after {
  transition: none;
}

[JavaJamie]

Apologies for piggybacking on this issue (didn't want to create a separate one for something similar). Is there a way to disable the only the tab swipe effect transition when overriding the theme? Something like this (although I don't know what exactly it would be after trying several things):

MuiTabs: {
    '&:after': {
        transition: none;
    }
}

[oliviertassinari]

@JavaJamie This doesn't look correct. Use theme.props.MuiTab.disableRipple = true.

[JavaJamie]

Hi @oliviertassinari. I have tried that but to no avail.

props: {
        MuiTab: {
            disableRipple: true
        }
    },

It works if I do the following (although removes ALL transitions. We wish to just remove the MuiTab swipe transition when you click on the tab):

transitions: {
    create: () => 'none' // Disable transitions to mitigate performance issues on low-end devices
},

Thanks for your support and great work with Material UI. It really is a game changer :)

[oliviertassinari]

@JavaJamie Then something is off in the way you are changing the value. Try this:

import React from "react";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import { Tabs, Tab } from "@material-ui/core";

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiTab: {
      // The default props to change
      disableRipple: true
    }
  }
});

function DefaultProps() {
  return (
    <ThemeProvider theme={theme}>
      <Tabs value={0}>
        <Tab label="1" />
        <Tab label="2" />
      </Tabs>
    </ThemeProvider>
  );
}

export default DefaultProps;

https://codesandbox.io/s/material-demo-i6xwk

[williamzhou0812]

// May help add this two line in your index.css ( react )

// disable Ripple Effect
.MuiTouchRipple-root {
display: none;
}

// disable FocusHightlight
.MuiCardActionArea-focusHighlight {
display: none;
}

[jeemok]

For TextField you can use withStyles:

const CustomTextField = withStyles({
  // Override default CSS for input
  root: {
    '& .MuiInput-underline': {
      // Remove the ripple effect on input
      '&:after': {
        borderBottom: 'initial',
      },
    },
  },
})(TextField);

...

// Usage
<CustomTextField />