[英]Styling mat-tab labels -Angular Material
I'm trying to figure out how to change the color of the mat-tab labels.我想弄清楚如何更改 mat-tab 标签的颜色。 I've gone through every stack overflow post related to styling mat-tabs, but none of the solutions have changed the text color from white to black;我已经浏览了与样式 mat-tabs 相关的所有堆栈溢出帖子,但没有一个解决方案将文本颜色从白色更改为黑色; Right now it looks like this.现在它看起来像这样。 You can't even see the non-active tabs.您甚至看不到非活动选项卡。
How can I get the non-active links to show up as the color black?如何让非活动链接显示为黑色?
<div class="buttonRow">
<mat-tab-group id="linkLabel" mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4" >
<div class="tabContent" >
<mat-tab id="tab1" label="Tab1" > Content 1 </mat-tab>
<mat-tab id="tab2" label="Tab2"> Content 2 </mat-tab>
<mat-tab id="tab3" label="Tab3"> Content 3 </mat-tab>
</div>
</mat-tab-group>
</div>
css I'm using that's currently working我正在使用的 css 目前正在运行
::ng-deep.mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),
::ng-deep.mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: green;
color: white;
opacity: 1;
}
End result of answer by Nathan内森回答的最终结果
Use it this way:以这种方式使用它:
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color: red;
background-color: green;
}
** Note: Apply these styles in styles.scss**
**Active tab label colour changes:**
.mat-tab-label-active
{
color: #00ADEE !important;
}
**To remove the border for the tabs:**
.remove-border-bottom .mat-tab-header
{
border-bottom: none;
}
**To chnage the colour of the ink bar(tab border):**
.mat-tab-nav-bar:active
{
color: #00ADEE !important;
}
** To specify the height && color for the ink bar:**
.mat-ink-bar{
background-color: #00ADEE !important;
display:block;
height: 8px !important;
}
You might need to set the active text color to white instead您可能需要将活动文本颜色设置为白色
.mat-tab-label.mat-tab-label-active {
color: #ffffff;
}
Then change the default label color to black然后将默认标签颜色更改为黑色
.mat-tab-label {
color: #000000;
}
无需使用 ng-depp 或使用全局样式,只需使用 mat-tab-label 指令,如本例所示: https : //material.angular.io/components/tabs/overview#tab-group-custom-标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.