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

问题描述：

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

I'm using the Angular Material tabs component. Using an example straight from the official docs...

<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 中尝试了多种方法，但显然我遗漏了一些东西.如果有人可以提供帮助，将不胜感激.

Everything works fine except that the font size in the tab labels is smaller than I would like and I can't seem to figure out how to make it bigger. I've tried multiple things in CSS but clearly I'm missing something. If someone could help it would be greatly appreciated.

答

in styles.css(@Marshal 更正)

in styles.css (Correct by @Marshal)

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

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

Or you can use the following in component CSS

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

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

In CSS we can declare style rules like! Important to make the priority on style rules that can be found before

2021 年编辑

最好使用ViewEncapsulation

Is better use ViewEncapsulation

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

并在 .scss 文件中.

and in the .scss file.

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

小心，正如 Angular Material 所说:

Be careful, as Angular Material says:

在您的组件上关闭视图封装.如果你这样做，请确保适当地调整你的风格，否则你可能最终偶然地针对应用程序中其他地方的其他组件.

Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elsewhere in your application.

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

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

相关推荐