Home > other >  Change ripple effect duration in MUI React
Change ripple effect duration in MUI React

Time:11-09

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 Codesandbox Demo

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

Codesandbox Demo

  • Related