Tabs “角度材质活动”选项卡标签颜色在单击时更改

我覆盖了mat tab标签active，将活动选项卡的颜色更改为自定义颜色（黄色），但当我单击页面中的任何位置时，颜色会发生变化并变脏，就像上面有另一层褪色的颜色一样（）。如何保持活动选项卡的颜色，就像一直单击时一样/直到更改选项卡

我的代码：

::ng-deep.mat-tab-label.mat-tab-label-active {
  background-color: #FCE500;
  font-weight: 700;
  color: black;
}

---

不透明度和背景色将根据焦点动态更改。你需要控制它。差不多

::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: #FCE500;
  font-weight: 700;
  color: black;
  opacity: 1;
}

---

我不建议更改不透明度，因为如果将其设置为始终为“1”，则该选项卡看起来有焦点，而实际上它没有-您无法分辨区别-这不是一个好的用户体验。

已经回答了，但我遇到了同样的问题，但用另一种解决方案解决了它，因为其他答案并不真正符合我的偏好。这就是我所做的：

（这是一个有效的闪电战：）

我为导航声明了我的选项卡。并声明了一个SelectionModel

  public tabs = [
    {value: 'Stepper', link: './stepper'},
    {value: 'Quotations', link: './quotations'},
    {value: 'Designs', link: './designs'},
    {value: 'Elements', link: './elements'},
    ];
  private selection = new SelectionModel();

在我的HTML中，它如下所示：

<nav mat-tab-nav-bar class="tabs-group">
  <a *ngFor="let tab of tabs" (click)="select(tab)" mat-tab-link [routerLink]="tab.link" 
     class="header-btn" [ngClass]="{focus: isSelected(tab)}">
    <a>{{tab.value}}</a>
  </a>
</nav>
<router-outlet class="router-outlet-small"></router-outlet>

isSelected（）方法将返回true/false，这将触发样式类到header-btn.focus，如下所示

.header-btn {
 // My css
}

.header-btn.focus {
  opacity: 1;
}

---

非常感谢。不透明部分是我丢失的部分。谢谢。不透明部分是我的缺失部分。阅读

：：ng deep

将被弃用，我们需要使用

视图封装。在我们定义样式URL和模板URL的组件属性中没有
，如在文档中写入的：
.header-btn {
 // My css
}

.header-btn.focus {
  opacity: 1;
}