How do I change the ripple background color on Button?

Question

So far in the API (v3.9.2), I see a mention of TouchRippleProps for ButtonBase for https://material-ui.com/api/button-base/

My but

Answer 1

I achieved reasonable behavior with the following changes to your 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
    }
  }
});

The issue with touch screens is that a touch triggers the "hover" effect and it doesn't go away till you touch somewhere else. "@media (hover: none)" targets the hover effect for touch devices (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover). The "active" CSS is in effect during the touch/click and then the ripple built in to Button takes care of the rest.

You can, of course, adjust the hover and active colors as desired.

Answer 2

It doesn't appear animations other than the ripple are supported. However, you can create something like this TriggeredAnimation wrapper component:

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

And use it like this:

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

Then, you can create a css animation and change the background when the click class is present.