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
From the source , the class name where the animationDuration
is set is MuiTouchRipple-rippleVisible
. You just need to override that value:
V5
<Button
sx={{
'&& .MuiTouchRipple-rippleVisible': {
animationDuration: '200ms',
},
}}
>
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',
},
},
},
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.