时间戳

首页 > 解决方案 > 仅对父 mat-tab-group 应用自定义样式

angular - 仅对父 mat-tab-group 应用自定义样式

问题描述

我想将一些自定义样式仅应用于父mat-tab-group级而不影响子级mat-tab-groups。因此，我尝试仅向父级添加自定义类，mat-tab-group但它不起作用。有什么办法可以做到这一点？

问题的一个stackbitz例子： -演示

实际项目的

Stackbitz 示例的源代码：

选项卡组基本示例.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>

选项卡组基本示例.css

    .parent-tab-group .mat-tab-label {
      color: white;
      min-width: 25px !important;
      padding: 5px;
      background-color: orange;
      font-weight: 700;
    }

选项卡组基本示例.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 {}

标签： angularangular-materialmat-tab

解决方案

我应该只针对最顶层父母的孩子的标题。例如，我尝试将选择器更改为.parent-tab-group > .mat-tab-header .mat-tab-label，它对我有用。

参考：https ://github.com/angular/components/issues/21710#issuecomment-770970418

推荐阅读