Угловой 7 |коврик активен |стили не отражены

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.