如何使用CSS设置“角度材质”选项卡的样式？

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-deep，因为它已被弃用：

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

相反，您应该将其设置为有角度的材料文档：

https://material.angular.io/guide/theming

由于您的材料组件可能会有很多自定义样式，因此这是一个更好的方法，并且您可以根据需要将所有材料自定义样式集中在一个单独的scss文件中。

实现示例（未经测试，但应该可以使用）：

my-custom-elements.scss

@import '~@angular/material/theming';

@mixin custom-tabs-theme() {
  .mat-tab-label-active  {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }
}

global-material-theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-tabs-theme();

angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

注意：您可以通过这种方式编辑任何重要的CSS类。

Answer 2

要将自定义类添加到材料选项卡，必须使用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演示。