问题描述
我只想将一些自定义样式应用于父级 mat-tab-group
,而不影响子级 mat-tab-groups
。因此,我尝试仅向父 mat-tab-group
添加自定义类,但它不起作用。有什么办法可以做到这一点吗?
问题的stackbitz
示例:- Demo
实际项目
- Angular 版本 - 8.2.14
- Angular Material 版本 - 8.2.3
Stackbitz 示例的源代码:
tab-group-basic-example.html
<mat-tab-group mat-stretch-tabs class="parent-tab-group">
<mat-tab label="P1">
<mat-tab-group mat-stretch-tabs>
<mat-tab label="P1 - C1"> Parent 1 - Child 1 </mat-tab>
<mat-tab label="P1 - C2"> Parent 1 - Child 2 </mat-tab>
<mat-tab label="P1 - C3"> Parent 1 - Child 3 </mat-tab>
</mat-tab-group>
</mat-tab>
<mat-tab label="P2">
<mat-tab-group mat-stretch-tabs>
<mat-tab label="P2 - C1"> Parent 2 - Child 1 </mat-tab>
<mat-tab label="P2 - C2"> Parent 2 - Child 2 </mat-tab>
<mat-tab label="P2 - C3"> Parent 2 - Child 3 </mat-tab>
</mat-tab-group>
</mat-tab>
<mat-tab label="P3">
<mat-tab-group mat-stretch-tabs>
<mat-tab label="P3 - C1"> Parent 3 - Child 1 </mat-tab>
<mat-tab label="P3 - C2"> Parent 3 - Child 2 </mat-tab>
<mat-tab label="P3 - C3"> Parent 3 - Child 3 </mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
tab-group-basic-example.css
.parent-tab-group .mat-tab-label {
color: white;
min-width: 25px !important;
padding: 5px;
background-color: orange;
font-weight: 700;
}
tab-group-basic-example.ts
import { Component,ViewEncapsulation } from "@angular/core";
@Component({
selector: "tab-group-basic-example",templateUrl: "tab-group-basic-example.html",styleUrls: ["./tab-group-basic-example.css"],encapsulation: ViewEncapsulation.None
})
export class TabGroupBasicExample {}
解决方法
您可以使用 ::ng-deep
::ng-deep {
.parent-tab-group .mat-tab-label {
color: white;
min-width: 25px !important;
padding: 5px;
background-color: orange;
font-weight: 700;
}
}
对于 css
::ng-deep .parent-tab-group .mat-tab-label {
// style here
}
,
尝试使用:
<mat-tab-group mat-stretch-tabs backgroundColor="primary">
<mat-tab aria-label="primary" label="P1">
<mat-tab-group mat-stretch-tabs>
<mat-tab label="P1 - C1"> Parent 1 - Child 1 </mat-tab>
<mat-tab label="P1 - C2"> Parent 1 - Child 2 </mat-tab>
<mat-tab label="P1 - C3"> Parent 1 - Child 3 </mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
并在css中添加以下内容
[aria-label=primary] {
min-width: 25px !important;
padding: 5px;
background-color: orange;
font-weight: 700;
}
我编辑了你的演示
我认为这对你有帮助
,我应该只针对作为最顶层父级的子级的标头。例如。我尝试将选择器更改为 .parent-tab-group > .mat-tab-header .mat-tab-label
并且对我有用。
参考:https://github.com/angular/components/issues/21710#issuecomment-770970418