angular - 如何更改 Angular Material 步进器步骤图标的颜色

Question

在 Angular Material 步进器组件中，每个步骤都由圆圈中的图标表示。该圆圈的背景颜色设置为主题的主要颜色。是否可以将此颜色更改为主题的强调色？我试过设置 color="accent"在 mat-horizontal-stepper 上组件和每个 mat-step组件，但两者都没有任何效果，而且我在文档中没有看到颜色输入。

Answer 1

似乎没有更改垫子步进器图标颜色的选项，您可以使用此 css 作为解决方法。

 ::ng-deep .mat-step-header .mat-step-icon-selected {
    background-color: red; 
 }

::ng-深已弃用，可以删除，也可以使用

ViewEncapsulation.None 在组件装饰器中避免使用::ng-deep

更新问题的解决方案

html文件示例

 <div class="yellow-theme"> <----- wrapper theme class
     <button mat-raised-button (click)="isLinear = !isLinear" id="toggle- 
      linear">
            {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
          </button>
          <mat-horizontal-stepper [linear]="isLinear" #stepper>
            <mat-step [stepControl]="firstFormGroup">
              <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>Fill out your name</ng-template>
                <mat-form-field>
                  <input matInput placeholder="Last name, First name" 
                  formControlName="firstCtrl" required>
                </mat-form-field>
                <div>
                  <button mat-button matStepperNext>Next</button>
                </div>
              </form>
            </mat-step>
            <mat-step [stepControl]="secondFormGroup">
              <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>Fill out your address</ng-template>
                <mat-form-field>
                  <input matInput placeholder="Address" formControlName="secondCtrl" required>
                </mat-form-field>
                <div>
                  <button mat-button matStepperPrevious>Back</button>
                  <button mat-button matStepperNext>Next</button>
                </div>
              </form>
            </mat-step>
            <mat-step>
              <ng-template matStepLabel>Done</ng-template>
              You are now done.
              <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button (click)="stepper.reset()">Reset</button>
              </div>
            </mat-step>
          </mat-horizontal-stepper>

创建 theme.scss 文件并将其添加到 angular.json 中的样式

 "styles": [
          "src/styles.css",
          "src/theme.scss"
           ]

备注 步进器将采用原色的颜色

主题.scss

 @import '~@angular/material/theming';
 @include mat-core();

 .yellow-theme {
     $yellow-theme-primary: mat-palette($mat-yellow, 400);
     $yellow-theme-accent:  mat-palette($mat-yellow, 400);

     $yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

     @include angular-material-theme($yellow-theme);
 }

自定义主题类可以跨应用程序使用，只需包装任何 Material 组件并使用类中定义的颜色属性primary、accent 或warn。
包装在自定义类中的组件将使用该颜色，如果不是从全局主题设置颜色。