覆盖角mat-tab的css答案

【问题标题】：Overwriting css for angular mat-tab覆盖角mat-tab的css
【发布时间】：2020-07-09 08:44:40
【问题描述】：

我想更改垫标签的垫标签颜色。我添加的 CSS 是：

.mat-tab-label {
  min-width: 25px !important;
  padding: 5px;
  background-color: transparent;
  color: white;
  opacity: 1 !important;
  font-weight: 700;
}

它正在改变标签的颜色。但是，它正在改变整个应用程序中所有 mat-tabs 的颜色。如何单独更改特定选项卡。

【问题讨论】：

如果您在全局 style.css 或 scss 中设置选项卡的样式，它将全部更改。您需要在要使用该样式的组件中添加一个用于隔离的文件。
@anthonywillismuñoz 你是对的。
我将 css 添加到单个组件中。但是，它反映了所有
尝试添加到 style.css 中它会起作用。 @MaruthiEranki
我移至 style.css 并将组件添加为 .mat-tab-label 的前缀。这解决了问题。

标签： css angular angular-material

【解决方案1】：

可以使用组件标签标签，

 app-component-name .mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: white;
    opacity: 1 !important;
    font-weight: 700;
}

或者在标签中添加一个类

【讨论】：

【解决方案2】：

您必须在 style.css 或 style.scss 中覆盖类样式

.mat-tab-label {
  min-width: 25px !important;
  padding: 10px;
  background-color: transparent;
  color: white;
  opacity: 1 !important;
  font-weight: 700;
}

堆栈闪电战：https://stackblitz.com/edit/angular-mat-tab-active-89vnui

【讨论】：