样式标签标签-角材料

Question

我正在尝试弄清楚如何更改mat-tab标签的颜色。我已经遍历了与样式标签相关的所有堆栈溢出问题，但是没有一种解决方案可以将文本颜色从白色更改为黑色。 现在看起来像这样。您甚至看不到非活动标签。

如何使非活动链接显示为黑色？

<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正在运行

::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;
}

内森回答的最终结果

Answer 1

以这种方式使用它：

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
  color: red;
  background-color: green;
}

Stackblitz example

Answer 2

** 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;
}

Answer 3

您可能需要将活动文本的颜色改为白色

.mat-tab-label.mat-tab-label-active {
   color: #ffffff;
}

然后将默认标签颜色更改为黑色

.mat-tab-label {
  color: #000000;
}

Answer 4

不需要使用 ng-depp 或使用全局样式，只需使用 mat-tab-label 指令，如本例所示：https://material.angular.io/components/tabs/overview#tab-group-custom-label