如何更改mat-step标签的字体大小？

Question

似乎无法使用 style= 和 css 更改它。这也是我附加的代码

<div class="statusbar">
    <mat-horizontal-stepper linear >
            <mat-step label="One"  [completed]="false"></mat-step>
            <mat-step label="Two"  [completed]="false" [editable]="false"></mat-step>
            <mat-step label="Three"[completed]="false" [editable]="false"></mat-step>
            <mat-step label="Four"[completed]="false" [editable]="false"></mat-step>
            <mat-step label="Five"[completed]="false" [editable]="false"></mat-step>
            <mat-step label="Six"[completed]="false" [editable]="false"></mat-step>
            <mat-step label="Seven"[completed]="false" [editable]="false"></mat-step>
            <mat-step label="Eight"[completed]="false" [editable]="false"></mat-step>  
    </mat-horizontal-stepper>                                                            
</div>

Answer 1

您可以尝试以下操作：

.statusbar{font-size:50px}

Answer 2

第 1 步 - 在组件装饰器中添加 ViewEncapsulation.None。

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

第 2 步 - 添加自定义 CSS。

.mat-step-header .mat-step-label .mat-step-text-label {
    font-size: 24px;
    color: red;
}

结果-

Answer 3

对我来说，这总是有效的：

::ng-deep .mat-step-text-label {
  font-size: 0.9rem;
}

如何更改mat-step标签的字体大小？

How to change the font size of mat-step's label?

html

font-size

angular