Angular Material Tab Component - How to change label font size

问题

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>

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.

回答1:

in styles.css (Correct by @Marshal)

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

Or you can use the following in component CSS

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

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

来源：https://stackoverflow.com/questions/55286721/angular-material-tab-component-how-to-change-label-font-size