如何更改按钮上的纹波背景颜色？

Question

所以API（v3.9.2）远，我看到TouchRippleProps一提的ButtonBase为https://material-ui.com/api/button-base/

我的按钮看起来像

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

和我的按钮style是。

 button: {
    backgroundColor: colors.surface,
    borderRadius: 0, // to make buttons sharp edged
    touchRipple: colors.primary
  }

当我触摸一个按钮，我看到一个白色背景（见数5）作为我的问题是，当我触摸一个按钮，我怎么能更改背景从white让我们说blue然后让它消逝？

UPDATE。

Answer 1

我实现了合理的行为与以下更改numberPadStyle：

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

带有触摸屏的问题是触摸触发“悬停”效果，直到你摸别的地方它不会消失。 "@media (hover: none)"靶向用于触摸设备悬停效果（https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover）。 “活动” CSS实际上是在接触期间/单击，然后内置到Button纹波负责剩下的照顾。

你可以，当然，根据需要调整悬停和活跃的色彩。

Answer 2

它不会显得比其他波纹动画的支持。但是，您可以创建这样的TriggeredAnimation包装组件：

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动画和更改背景。