如何更改按钮上的波纹背景颜色? [英] How do I change the ripple background color on Button?

问题描述

到目前为止，在API(v3.9.2)中，我看到针对ButtonBase提到了TouchRippleProps ="nofollow noreferrer"> https://material-ui.com/api/button-base/

So far in the API (v3.9.2), I see a mention of 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，然后使其消失?

When I touch a button, I see a white background (see number 5) as My question is that When I touch a button, how can I change that background from white to let's say blue and then let it fade away?

更新.

推荐答案

通过对您的numberPadStyle进行以下更改，我实现了合理的行为:

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

触摸屏的问题在于，触摸会触发悬停"效果，并且直到您触摸其他地方时，触摸效果才会消失. "@media (hover: none)"针对触摸设备的悬停效果( https: //developer.mozilla.org/zh-CN/docs/Web/CSS/@media/hover ).触摸/点击过程中会激活活动" CSS，然后Button中内置的涟漪处理其余部分.

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.

这篇关于如何更改按钮上的波纹背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！