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.