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

推荐答案

他们只是在焦点上添加 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

工作演示

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