如何使用 CSS 为 Angular Material 选项卡设置样式？

Question

我对 Angular 很陌生。我最近在我的应用程序项目中添加了类似于下面的 Angular Material 选项卡。

<mat-tab-group>
  <mat-tab label="First"  class="firstTab"> Content 1 </mat-tab>
  <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
  <mat-tab label="Third"  class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

在我的应用程序中，我有时需要让用户注意某些选项卡。我正在考虑的方法是通过赋予其以下品质来突出显示感兴趣的选项卡：

.highLightTab{
   border-width: 9px;
   border-style: solid;
   border-color: orange;
}

实现上述目标的传统方法是通过

$(".secondTab").addClass("highLightTab");

然而，事实证明这是不可能实现的，因为我无法为运行时生成的任何 Mat-X 元素自定义 CSS 类/CSS 样式。

谁能告诉我如何实现这一目标？

Answer 1

要将自定义类添加到您的材料选项卡，您必须使用以下ng-template语法：

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <span class="my-custom-class">Security</span>
        </ng-template>
        Content 1
    </mat-tab>
    <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
    <mat-tab class="my-custom-class" label="Third" class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

有了这个，你可以my-custom-class像往常一样设计你的风格：

.my-custom-class {
  border-width: 9px;
  border-style: solid;
  border-color: red;
}

您还可以使用::ng-deep伪元素设置默认材质类的样式。

:host ::ng-deep .mat-tab-label-active {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }

这 :host是可选的，即作用域的样式在当前组件的选项卡。

附件是stackblitz演示。