Question

我正在使用Material UI https://material-ui.com/。

如何使用普通按钮更改波纹效果的不透明度？

<Button className={classes.ripple} />

ripple: {
   color: "red",
}

我在文档中找到了它：

 /* Styles applied to the internal `Ripple` components `rippleVisible` class. */
  rippleVisible: {
    opacity: 0.3,
    transform: 'scale(1)',
    animation: `mui-ripple-enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`,
  },

Answer 1

您可以这样做。

const styles = theme => ({
  btn: {
      height: 60,
      fontSize: 18,
      textTransform: "none"
  },
  buttonRipple: {
      opacity: 0.3,
      transform: "scale(1)",
      animation: `ripple-effect 550ms ${theme.transitions.easing.easeInOut}`
  },
  "@keyframes ripple-effect": {
    "0%": {
        transform: "scale(0)",
        opacity: 0.1
    },
    "100%": {
        transform: "scale(1)",
        opacity: 0.9
    }
  }

})


render: function () {

  return (
    <Button
        className={classes.btn}
        TouchRippleProps={{ classes: { rippleVisible: classes.buttonRipple } }}
    >

  )
}

您将需要定义一个新的关键帧，因为不透明度是由关键帧动画控制的，该动画采用开始和结束不透明度。如果长按按钮，则将从“ buttonRipple”类中定义的不透明度中显示不透明度。

希望这会有所帮助。

React Material UI中的波纹效果不透明度

1 个答案: