角 7 | mat-tab 活动 |样式未反映

Question

<div class="navigation">
>         <mat-tab-group disableRipple="true"  selectedIndex="0">
>             <mat-tab label="Label1"> </mat-tab>
>             <mat-tab label="label 2">  </mat-tab>
>             <mat-tab label="Label 3">  </mat-tab>
>         </mat-tab-group>
>     </div>

以上是我的html，我想选择label1作为默认选项卡。 但是，当我说 selectedIndex="0" 时不会应用活动样式，而是在单击选项卡时应用。

当我的标签处于活动状态时，标签标签颜色为白色。默认情况下使用 selectedIndex="0" 选择选项卡时，情况并非如此。

我正在使用 angular7。 以下是我的组件 css 中的材质选项卡样式

Material Tab 相关的 CSS 样式：

.mat-ink-bar{
>         background-color: #ffffff !important;
>         border-bottom-color:solid #FFFFFF!important;
>         width: 113px !important;
>         height:4px !important;
>         margin-left: 2rem;
>         margin-bottom:0px;
>         
>     }
>     
>     .mat-tab-label, .mat-tab-label-active{
>         color:#FFFFFF;
>         background-color: transparent;
>         font-family: "verdana";
>         font-size: 20px;
>         font-weight:500;
>         max-width: 113px;
>         padding: 0px;
>         margin:0px;
>     }

请提出建议。提前谢谢。 对格式错误表示歉意。

Answer 1

以下是我的组件 css 中的材质选项卡样式

您的样式在组件 CSS 中不起作用，因为选项卡组件样式已封装。您需要将样式放在全局样式表中，或者使用深度组合器：

/deep/ .mat-tab-ink-bar {
   ...
}

此外，您的样式将相同的样式应用于 所有 活动和非活动标签标签：

.mat-tab-label, .mat-tab-label-active {

应该是

.mat-tab-label.mat-tab-label-active {

或者只是.mat-tab-label-active。