Angular Material Tab Component - 如何更改标签字体大小

Question

我正在使用 Angular Material tabs 组件。直接使用官方文档中的示例...

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

一切正常，只是标签中的字体大小比我想要的要小，而且我似乎无法弄清楚如何使它变大。我在 CSS 中尝试了多种方法，但显然我遗漏了一些东西。如果有人可以提供帮助，将不胜感激。

Answer 1

在styles.css中（@Marshal更正）

.mat-tab-label{
    font-size: 10px !important;
 } 

或者您可以在组件 CSS 中使用以下内容

::ng-deep .mat-tab-label .mat-tab-label-content {
    font-size: x-large;
}

在 CSS 中，我们可以像这样声明样式规则！重要的是优先考虑之前可以找到的样式规则

2021 年编辑

最好使用 ViewEncapsulation

import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

并在 .scss 文件中。

.content { 
   .mat-tab-label{
     font-size: 10px;
   } 
}

小心，正如 Angular Material 所说：

在您的组件上关闭视图封装。如果您这样做，请确保适当地确定样式的范围，否则您最终可能会偶然地针对应用程序中其他位置的其他组件。

https://material.angular.io/guide/customizing-component-styles