Change ripple effect duration in MUI React

Question

I want to modify ripple effect duration in theme file

I've tried things like

const theme = createMuiTheme({
    props: {
        MuiButtonBase: {
            TouchRippleProps: {
                animationDuration: '5s',
                transitionDuration: '5s',
            },
            classes: {
                root: 'CustomizeTouchRipple'
            }
        },
    }
})

Not working.. but class is added

Edit:

I found its a constant in TouchRipple component https://github.com/mui-org/material-ui/blob/c06a88d24235685dd769c1a3df82152ded17a6ca/packages/material-ui/src/ButtonBase/TouchRipple.js#L8

user_9449426 · Answer

From the source, the class name where the animationDuration is set is MuiTouchRipple-rippleVisible. You just need to override that value:

V5

V4

const theme = createTheme({
  overrides: {
    MuiButton: {
      root: {
        '& .MuiTouchRipple-rippleVisible': {
          animationDuration: '200ms',
        },
      },
    },
    // if you want to change the ripple duration of all components that have ripple
    // effect (e.g. Button, CardActionArea, FAB...)
    MuiTouchRipple: {
      rippleVisible: {
        animationDuration: '200ms',
      },
    },
  },
});

Change ripple effect duration in MUI React

1 Answers