tabs - 单击离开时，角 Material 事件选项卡标签颜色会发生变化

Question

我覆盖了 mat-tab-label-active 以将事件选项卡的颜色更改为自定义颜色(黄色)，但是当我单击页面中的任意位置时，颜色会发生变化并变得很脏，就像在顶部有另一层褪色一样它( see this screenshot )。我如何保持事件选项卡的颜色，就像一直点击它一样/直到更改选项卡？

我的代码:

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

Answer 1

不透明度和背景颜色根据焦点动态变化。你需要控制它。就像是

::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”，则看起来该选项卡具有焦点，而实际上却没有-您无法分辨出区别-这不是一个好的用户体验。