mat-tab-group不显示默认选项卡的样式 [英] mat-tab-group doesn't show styles for default tab selected

问题描述

我有三个标签: label1 ， label2 和 label3 .在它们每个内部都有另一组选项卡.现在默认情况下， label1 显示所选样式以及其中的 tab1 .现在，一旦我单击另一个标签(如 label 2 )，就会加载另一组标签，但其中没有一个标签标签高亮显示. label3 也是如此.我必须明确地单击选项卡才能查看样式.

I have three tabs:label1, label2 and label3. Inside each one of them there is another set of tabs. Now by default label1 shows the selected style as well as tab1 inside of it. Now once I click on another label like label 2 another set of tab loads but none of them shows tab label highlighted. Same goes for label3. I explicitly have to click on the tabs to see the styles.

请找到该问题的链接: https://stackblitz.com/edit/angular-tyjslw?file=app/tabs-template-label-example.html

Please find a link to the issue:https://stackblitz.com/edit/angular-tyjslw?file=app/tabs-template-label-example.html

推荐答案

它们只是在焦点上添加css，因此，如果要在active上添加样式，可以通过以下方式实现:

They are only adding css on focus , so if you want to add style on active ,you can achieve that by :

在组件CSS中:

.mat-tab-label-active{
  background-color: red;
  opacity: 1;
}

组件侧面添加:

encapsulation : ViewEncapsulation.None

工作演示

WORKING DEMO

这篇关于mat-tab-group不显示默认选项卡的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！