Angular mat-tab-nav-bar 如何更改文本的颜色？

【问题标题】：Angular mat-tab-nav-bar how can I change the color of the text?Angular mat-tab-nav-bar 如何更改文本的颜色？
【发布时间】：2020-09-12 22:25:29
【问题描述】：

通过执行以下操作，我可以更改选项卡文本的颜色：

.mat-tab-link {
  color: black;
}

但是当未选择选项卡时，文本非常略微透明，使其呈现灰色外观（在白色背景上）。如何为未选择的标签设置透明度/CSS？

【问题讨论】：

标签： angular angular-material navbar

【解决方案1】：

您可以通过查看 DOM 找到特定的类组合，然后指定它，或者直接这样做：

.mat-tab-link {
  color: black;
  opacity: 1 !important;
}

您可能需要使用::ng-deep

::ng-deep.mat-tab-link {
  color: black;
  opacity: 1 !important;
}

【讨论】：

不要使用 ng-deep 它已被弃用。改用 Scss。

【解决方案2】：

您可以在styles.css 中添加样式。

.mat-tab-link{
  color:#3182ce;
}
.mat-tab-link.mat-tab-label-active{
  color:#ccc;
}

这里是 Stackblitz：https://stackblitz.com/edit/angular-mat-tab-nav-qka9gi?file=styles.css

【讨论】：