css - Angular 7 |垫标签事件 |样式未反射(reflect)

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 选项卡样式

与 Material 选项卡相关的 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

Below are the material tab styles in my component 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。