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中的材料选项卡样式

与“材质”标签相关的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。

角度7 | mat-tab有效|风格不体现

1 个答案: