时间戳

首页 > 解决方案 > 如何更改单个垫子步骤图标的背景颜色？

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

问题描述

 <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 个垫子步骤，但我想改变前两个的颜色，我该如何实现呢？我知道如何更改所选的，但事实并非如此。

我尝试在不同的类中应用步进器的 bg 颜色，但没有成功。

.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;
    }
}

标签： cssangularangular-material

解决方案

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

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

推荐阅读