如果为mat-tab-group设置了[backgroundColor]属性，则子控件的涟漪效应将丢失

问题描述

如果为mat-tab-group设置了[backgroundColor]属性，则子控件会失去波纹效果，是否有任何解决方法??

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

检查此Stackblitz示例以看到问题

推荐答案

波纹效果有效，但由于ripple color是白色，所以我们看不到它.之所以采用白色，是因为您已将backgroundColor设置为原色，而您的原色是蓝色，具有前景白色.波纹会自动采用此前景色.

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. 如果您将backgroundColor设置为深色，则为matRippleColor属性提供颜色.

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>

通过设置指示灯backgroundColor.您的情况是accent.

By setting light backgroundColor. In your case its accent.

这篇关于如果为mat-tab-group设置了[backgroundColor]属性，则子控件的涟漪效应将丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！