css - 下一步活动时如何更改角度步进器进度颜色

Question

我正在尝试做一个进度步进器，如图所示

这是我在 css 中的代码

.mat-step-header[aria-selected="true"] {
    background-color: #07C496;
}
.mat-step-header[ng-reflect-active='true']{
    background-color: #07C496;
 }

html：

<mat-horizontal-stepper #stepper labelPosition="bottom" linear >
    <ng-template matStepperIcon="edit" let-index="index"> {{index + 1}}
    </ng-template>
    <mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
<mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
<mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
<mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
</mat-horizontal-stepper>

这个东西只在开发模式下工作，但在 prod 模式下不起作用，因为 ng-reflect-active 在 prod 模式下不存在。任何人都可以帮我在css中做到这一点吗？

标签： cssangulartypescript

Answer 1

您可以借助通用兄弟组合器( ) 在行为之前模拟选择所有元素：~

.mat-step-header {
    background-color: #07C496 !important;
}

.mat-step-header[aria-selected="true"] ~ * {
    background-color: transparent !important;
}

Stackblitz 示例