如何更改 Button 上的波纹背景颜色？答案

【问题标题】：How do I change the ripple background color on Button?如何更改 Button 上的波纹背景颜色？
【发布时间】：2019-02-05 00:03:52
【问题描述】：

到目前为止，在 API (v3.9.2) 中，我看到提到 TouchRippleProps for ButtonBase for 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，然后让它消失？

更新。

【问题讨论】：

复制此内容的 CodeSandbox 会有所帮助。
有很多方法可以解决这个问题，但从您的问题中不清楚是什么导致按钮变为白色背景以及它是否保持白色。由于这不是默认行为的一部分，因此显示当前行为的沙箱将更容易提供实际适用于您的其余样式的方法。
谢谢@RyanCogswell。代码沙箱是codesandbox.io/s/2ryy62zn0。但是，当您在浏览器窗口中打开它时，不会弹出问题，但是如果您在 Mobile 或 Mobile View 中打开它（打开 DevTools），您会看到此问题。演示网址是2ryy62zn0.codesandbox.io
我添加了基于来自代码框的2ryy62zn0.codesandbox.io URL 的更新视图。再次感谢您

标签： javascript reactjs material-ui

【解决方案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 中内置的涟漪会处理其余部分。

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

【讨论】：

这对@Ryan 很有帮助。我什至没有仔细考虑这个问题。谢谢你教育我！

【解决方案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 动画并在点击类存在时更改背景。

【讨论】：

有人想猜猜为什么这会被否决吗？如果我能找出问题所在，我想改进它？