如何使用CSS来样式化Angular Material标签页？

Question

如何使用CSS来样式化Angular Material标签页？

9

我对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样式，因此这似乎是不可能实现的。

有人可以告诉我如何实现吗？

- SirBT

可能想要查看 https://material.angular.io/guide/theming - Heretic Monkey

2个回答

3

我不建议使用ng-deep，因为它已被弃用：

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

相反，你应该按照Angular Material文档的方式进行样式设置：

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

由于你可能会对Material组件有很多自定义样式，这是更好的方法，如果你想的话，可以将所有Material自定义样式集中在一个单独的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 类。

- Jorge Mussato

这是一个不错的答案，但在没有 ::ng-deep 的替代方案之前，我仍然更喜欢它，避免全局样式的存在。 - C.OG

1

@Jorge Mussato，感谢您提供详细的解决方案。虽然非常复杂，但我认为我没有表达清楚我的意思。我只是想要一个解决方案，使我能够突出显示任何选项卡，以吸引用户对其内容的注意力。例如，如果我想将用户的注意力集中在第三个选项卡上，我应该能够运行类似的代码 $(".thirdTab").addClass("mat-tab-label-active2");。我该如何实现这一点？ - SirBT

你也可以这样做。只需在每个选项卡中设置一个ngClass，在my-custom-element.scss中添加.mat-tab-label.highlight-this类。此外，在html中使用某种形式的[ngClass]="{highlight-this: condition}"。当条件为真时，此条件将使您的选项卡突出显示。不知道我是否表述清楚。 - Jorge Mussato

@C_Ogoo ::ng-deep也是一种解决方案，但在我使用它处理大型项目时，事情变得混乱无序。对于较小的项目，我想这是一个不错的选择。我更喜欢不使用它，因为它已经被弃用了，而我学习了“material docs”的方式。 - Jorge Mussato

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- C.OG · Accepted Answer

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