Angular 2 材质选项卡活动颜色自定义答案

【问题标题】：Angular 2 material tab active color customizeAngular 2 材质选项卡活动颜色自定义
【发布时间】：2017-07-25 06:06:32
【问题描述】：

我正在寻找自定义 md-tab 的活动颜色。

chrome 开发控制台中的类显示 ==> -mat-tab-label mat-ripple mat-tab-label-active。但没有一个有任何边框底部。有一个雪佛龙类，我试图改变，但没有效果。

我尝试了 /deep/ 几乎所有的课程。干活。还检查了 md-tab-header，但在任何地方都看不到那种颜色！任何帮助将不胜感激:)

【问题讨论】：

找到了！使用这个类。 .mat-ink-bar{ 背景颜色：#fff; }
如果您找到了解决方案，您可以回答并接受您自己的解决方案，将其标记为已解决
我在 18 小时内无法接受自己的回答，这是我收到的通知。

标签： customization angular-material2

【解决方案1】：

尝试它对我的工作

::ng-deep .mat-ink-bar {
  background-color:#ee2925 !important;}

【讨论】：

【解决方案2】：

它在 Angular 6 中对我有用

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #1f29a2;
}

【讨论】：

【解决方案3】：

在 Angular 7 中工作

.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #2C702A;
}

【讨论】：

【解决方案4】：

要自定义活动下划线，修改这个类

mat-ink-bar{ background-color:#fff; }

【讨论】：

【解决方案5】：

在您的组件中，将 ViewEncapsulation 设置为 None 并在您的 component.css 文件中添加样式。

Typescript 代码的变化：

从“@angular/core”导入{Component, ViewEncapsulation}；

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

组件 CSS：

    /* Styles for tab labels */
.mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
.mat-ink-bar {
    background-color: green;
}

【讨论】：

【解决方案6】：

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: black;
}

这适用于 Angular 10。

【讨论】：

【解决方案7】：

这个解决方案已经过测试并且在 Angular 10 中运行良好 -

.tabs .mat-tab-label.mat-tab-label-active {
  background-color: #5e70db;
  opacity: 1 !important;
}
.tabs .mat-ink-bar {
  background-color: #3f51b5 !important;
}

【讨论】：

【解决方案8】：

这些解决方案中的任何一个都不适用于我，但我做了一个通用解决方案而不使用 encapsulation.none

    /* Styles for tab labels */
::ng-deep .mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
::ng-deep .mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
::ng-deep .mat-ink-bar {
    background-color: green;
}

使用 ::ng-deep 你告诉 css 里面的材质被覆盖，然后你可以自定义它

【讨论】：