Javascript 如何更改按钮上的涟漪背景色？

到目前为止，在API v3.9.2中，我看到有人提到了ButtonBase的TouchRippleProps

我的纽扣看起来像

<Button variant="text"
                  size={"large"}
                  fullWidth
                  className={classes.button}
          >
            {value}
          </Button>

当我触摸一个按钮时，我看到一个白色背景，如图5所示 我的问题是，当我触摸一个按钮时，我如何将背景从白色变为蓝色，然后让它消失

更新。

---

除了支持ripple之外，它不会显示动画。但是，您可以创建类似以下TriggerDanitation包装器组件的内容：

class TriggeredAnimationWrapper extends Component {
  constructor(...args) {
    super(...args)
    this.state = {
      wasClicked: false
    }
    this.triggerAnimation = this.triggerAnimation.bind(this)
  }

  triggerAnimation(callback) {
    return (...args) => {
      this.setState(
        {wasClicked: true}, 
        () => requestAnimationFrame(()=>this.setState({wasClicked: false}))
      )
      if (callback) return callback(...args)
    }
  }

  render() {
    const {
      triggerAnimation,
      props: {
        children
      },
      state: {
        wasClicked
      }
    } = this.props
    return children({wasClicked, triggerAnimation})
  }
}

然后像这样使用它：

<TriggeredAnimationWrapper>({wasClicked, triggerAnimation}) => (
  <Button 
    onClick={triggerAnimation((e) => console.log('clicked', e))}
    className={wasClicked ? 'clicked' : ''}
  />
)</TriggeredAnimationWrapper>

---

然后，您可以创建css动画，并在出现click类时更改背景。

我通过对numberPadStyle的以下更改实现了合理的行为：

触摸屏的问题是触摸会触发悬停效果，直到你触摸到其他地方它才会消失@媒体悬停：无针对触摸设备的悬停效果。活动CSS在触摸/点击期间生效，然后内置的ripple to按钮处理其余部分

当然，您可以根据需要调整悬停和活动颜色

---

一个代码沙盒复制它会很有帮助。有很多方法可以做到这一点，但是你的问题不清楚是什么导致按钮变为白色背景，以及它是否保持白色。由于这不是默认行为的一部分，因此显示当前行为的沙盒将更容易提供实际适用于其他样式的方法。谢谢@RyanCogswell。代码沙盒是。但是，当您在浏览器窗口中打开此项时，问题不会弹出，但如果您在移动或移动视图中打开此项并打开DevTools，则可以看到此问题。演示的URL是我根据codesandbox中的URL添加了更新的视图。再次谢谢大家大家想猜猜为什么这会被否决吗？如果我能找出问题所在，我想改进一下。这对@Ryan帮助很大。我对这个问题的思考还不够深入。谢谢你教育我！

<TriggeredAnimationWrapper>({wasClicked, triggerAnimation}) => (
  <Button 
    onClick={triggerAnimation((e) => console.log('clicked', e))}
    className={wasClicked ? 'clicked' : ''}
  />
)</TriggeredAnimationWrapper>

const numberPadStyle = theme => ({
  button: {
    backgroundColor: colors.surface,
    borderRadius: 0, // to make buttons sharp edged
    "&:hover": {
      backgroundColor: colors.primary,
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: colors.surface,
        "&:active": {
          backgroundColor: colors.primary
        }
      }
    },
    "&:active": {
      backgroundColor: colors.primary
    }
  }
});