角度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中的材料選項卡樣式

與“材質”選項卡相關的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 。