Angular Material选项卡组件-如何更改标签字体大小 [英] Angular Material Tab Component - How to change label font size

问题描述

我正在使用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.

推荐答案

在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文件中.

.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选项卡组件-如何更改标签字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！