[英]Change one precise mat-tab background color- Angular Material
我想更改一個精確的 mat-tab 背景顏色,有這個解決方案可以工作,但比需要的要復雜一些。
我有這個當前有效的代碼,但我想刪除第一個帶有 aria-label id 的按鈕
HTML :
<div>
<mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup" value="custom">
<mat-button-toggle value="custom"> custom </mat-button-toggle>
</mat-button-toggle-group>
</div>
<mat-tab-group>
<mat-tab label="First" [aria-label]=backgroundColorToggle.value> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
</mat-tab-group>
CSS :
[aria-label=custom] {
background-color: #5473a1;
color: #ffffff;
}
我想要更簡單的東西,但它不起作用:
<mat-tab-group>
<mat-tab label="First" [aria-label]="custom"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
</mat-tab-group>
謝謝 !
這應該針對第一個選項卡( body )。
.mat-tab-group .mat-tab-body:first-child .mat-tab-body-content{background: red;}
這是我找到的解決方案:
.mat-tab-label-content {
.my-tab-color {
&.my-tab-color-green {
background-color: $mygreen;
color: white;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.