reactjs - 更改 MUI React 中的涟漪效果持续时间

Question

我想修改主题文件中的涟漪效果持续时间

我试过像

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

不工作..但添加类

编辑：

TouchRipple我发现它在组件 中是一个常量https://github.com/mui-org/material-ui/blob/c06a88d24235685dd769c1a3df82152ded17a6ca/packages/material-ui/src/ButtonBase/TouchRipple.js#L8

标签： reactjsmaterial-ui

Answer 1

从源码来看，设置的类名animationDuration是MuiTouchRipple-rippleVisible。您只需要覆盖该值：

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