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

Question

我想为md-tab自定义活动颜色。

chrome dev控制台中的类显示==＆gt; -mat-tab-label mat-ripple mat-tab-label-active。但没有任何边界底部。有一个雪佛龙课，我试图改变，但没有效果。

我尝试/深度/几乎所有课程。 Dint工作。 还检查了md-tab-header，但我看不到那种颜色！任何帮助将不胜感激：）

Answer 1

尝试对我有用

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

Answer 2

它在Angular 6中对我有用

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

Answer 3

在您的组件中，将ViewEncapsulation设置为“无”，然后在您的component.css文件中添加样式。

打字稿代码的更改：

从'@ 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;
}

Answer 4

要自定义活动下划线，请修改此类

{{1}}

Answer 5

在Angular 7中工作

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

Answer 6

这些解决方案中的任何一个都不适合我，但是我不使用封装就做了一个通用的解决方案。

    /* 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内部材质被覆盖，然后可以对其进行自定义

Answer 7

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

这适用于 Angular 10。

Answer 8

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

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