css - 如何更改单个垫子图标的背景颜色？

Question

 <mat-horizontal-stepper #stepper>
        <mat-step class="red-stepper">
            <ng-template matStepLabel>
                <span>Step 1</span>
            </ng-template>
        </mat-step>
        <mat-step class="red-stepper">
            <ng-template matStepLabel>
                <span>step 2</span>
            </ng-template>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>
                <span>Step 3</span>
            </ng-template>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>
                <span>Step 4</span>
            </ng-template>
        </mat-step>
</mat-horizontal-stepper>

例如，我这里有 4 个 mat-steps，但我想更改其中前两个的颜色，我该如何实现？我知道如何更改选中的，但事实并非如此。

我试过在不同的类中应用步进器的背景色，但没有成功。

.red-stepper {
    .mat-step-icon {
        span.ng-star-inserted {
            background-color: red !important;
        }
    }
    background-color: red !important;
    .mat-step-header .mat-step-icon {
        background-color: #007FAD !important;
    }
}

Answer 1

如果您尝试在父组件中应用样式，请尝试:

:host {
  ::ng-deep {
    mat-step {
      &.red-stepper {
        background-color: #000;
      }
    }
  }
}