Ripple Effect is lost for child controls if [backgroundColor] Property is set for a mat-tab-group

问题

Child Controls Loses Ripple Effect if [backgroundColor] property is set for mat-tab-group, is there any workaround.?

Check this Stackblitz example to see the Issue

回答1:

The ripple effect is working but we are not able to see it as the ripple color is white. It is taking white color because you have set backgroundColor to primary and your primary color is blue which has foreground white. The ripple automatically takes this foreground color.

You can solve it by two methods

1. By providing color to matRippleColor attribute if your backgroundColor set to dark color, in your case its primary and warn.

      <div class="div-style mat-elevation-z4" matRipple matRippleColor="rgba(0,0,0,.1)>Ripple</div>
   
   

2. By setting light backgroundColor. In your case its accent.

来源：https://stackoverflow.com/questions/54183885/ripple-effect-is-lost-for-child-controls-if-backgroundcolor-property-is-set-fo