Ripple Effect теряется для дочерних элементов управления, если свойство [backgroundColor] установлено для mat-tab-group

Question

Дочерние элементы управления теряют эффект ряби, если свойство [backgroundColor] установлено для mat-tab-group, есть ли обходной путь .?

Проверьте этот пример Stackblitz, чтобы увидеть проблему

Answer 1

Эффект ряби работает, но мы не можем его увидеть, поскольку ripple color белого цвета. Он принимает белый цвет, потому что вы установили backgroundColor в качестве основного, а ваш основной цвет - синий, у которого передний план белый. Волна автоматически принимает этот цвет переднего плана.

Вы можете решить это двумя способами

1. Предоставляя цвет атрибуту matRippleColor, если ваш backgroundColor установлен на темный цвет, в вашем случае его основной и предупреждающий.

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

2. Путем установки света backgroundColor. В вашем случае это accent.