我正在使用Angular 4，并且正在使用Angular材料。
<md-tab-group [disableRipple]=true>
<md-tab label="Tab 1"></md-tab>
<md-tab label="Tab 2"></md-tab>
</md-tab-group>
当（未选择/选择），文本颜色等时，我如何完全自定义背景颜色。---我已经成功设置了font-size，但是在设置时，文本颜色有点抖动。请帮助。
更新：
选择时，我试图将背景更改为透明...当未在选项卡等中选择链接时，试图覆盖颜色。但是仍然不起作用。
/* Styles go here */
.mat-tab-label{
color:white;
min-width: 25px !important;
padding: 5px;
background-color:transparent;
color:white;
font-weight: 700;
}
/deep/ .mat-tab-label{
min-width: 25px !important;
padding: 5px;
background-color:transparent;
color:white;
font-weight: 700;
}
.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{
background-color:transparent;
color:white;
font-weight: 700;
}
.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{
background-color:transparent;
color:white;
font-weight: 700;
}
.mat-tab-label:active{
min-width: 25px !important;
padding: 5px;
background-color:transparent;
color:white;
font-weight: 700;
}
.mat-tab-label:selected{
min-width: 25px !important;
padding: 5px;
background-color:transparent;
color:white;
font-weight: 700;
}
在您的组件中，将ViewSapsulation设置为None，然后将样式添加在component.css.css文件中。
更改打字稿代码：
import {Component, ViewEncapsulation} from '@angular/core';
@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;
}
demo
更新
要自定义标签背景和墨水栏，您可以定义自己的主题，然后在选项卡组上使用主题选项：
<div class="my-theme">
<mat-tab-group [backgroundColor]="'primary'" [color]="'warn'">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</div>
这是Stackblitz上的一个示例。
:: ng-deep
旧答案如果您不想触摸ViewEncapsulation，请使用:: ng-deep代替类选择器（通过浏览器开发工具检查）。
例如（Angular 5，材料2）：
/* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:red;
background-color: green;
}
/* ink bar */
::ng-deep .mat-ink-bar {
background-color: var(--primary-color,#1F89CE) !important;
}
最新解决方案： -
1）覆盖styles.css2）使用该材料标记存在的组件的选择器
style.css
app-child .mat-tab-label.mat-tab-label-active {
padding: 0px 15px ;
justify-content: flex-start;
}
app-child .mat-tab-label{
padding: 0px 15px ;
justify-content: flex-start;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background:#6168e7;
}
Angular版本6
自定义标签的新设计
html
<mat-tab-group [disableRipple]="true" mat-align-tabs="center">
<md-tab label="Tab 1"></md-tab>
<md-tab label="Tab 2"></md-tab>
</md-tab-group>
scss
::ng-deep .mat-tab-labels {
min-width: auto !important;
div {
border: 1px solid #fff;
background-color: #404040;
&.mat-tab-label-active {
background-color: #3aafa9;
.mat-tab-label-content {
border: none;
background-color: #3aafa9;
}
}
.mat-tab-label-content {
border: none;
color: #fff !important;
}
}
}
::ng-deep .mat-tab-group{
&.mat-primary {
.mat-ink-bar {
background-color: transparent;
}
}
}
::ng-deep .mat-tab-body-wrapper{
min-height: 550px
}
::ng-deep .mat-tab-label-container {
flex-grow: 0 !important;
}
::ng-deep .mat-tab-label{
opacity: 1 !important;
}
我花了很长时间才弄清楚如何通过覆盖材料设计来更改标签的背景颜色。我不知道在哪里分享我的最终结果，所以它去了：
.ts文件：
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.css'],
encapsulation: ViewEncapsulation.None
})
CSS文件：
.mat-tab-labels, .mat-tab-label, .mat-tab-link {
color: white;
font-size: 16px;
background-color: #804A71;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background: white;
height: 5px;
}
因此，这既是背景色，文本的颜色和大小（标签），也是文本下的标签栏。当我同时使用.mat-tab标签和.mat-tab标签时，它终于起作用。
您还可以使用:: ng-deep pseudo元素来样式默认材料类。
:host ::ng-deep .mat-tab-label {
border-width: 9px;
border-style: solid;
border-color: orange;
}
the：主机是可选的，将样式范围示为当前组件中的选项卡。
使用浏览器检查工具，然后尝试在CSS元素以下更改。当活动和不活动和标签文本颜色时，这些元素将更改标签背景颜色。
<mat-tab-group class="angular_tabs" preserveContent>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>.mat-mdc-tab-group, .mat-mdc-tab-nav-bar{
--mat-tab-header-active-focus-label-text-color: #151414;
--mat-tab-header-active-label-text-color : #151414;
--mat-tab-header-inactive-label-text-color: rgb(0 0 0 / 60%);
--mat-tab-header-inactive-focus-label-text-color: rgb(236 131 218 / 60%);
--mat-tab-header-inactive-hover-label-text-color : rgb(236 131 218 / 60%);
--mdc-tab-indicator-active-indicator-color: #242022;
--mat-tab-header-active-hover-label-text-color: #5052c3;
--mat-tab-header-active-ripple-color: #c2185b;
--mat-tab-header-inactive-ripple-color: #232222;
}