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

【问题标题】：how to change angular stepper progress color when next step active下一步活动时如何更改角度步进器进度颜色
【发布时间】：2020-08-04 22:20:26
【问题描述】：

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

这是我的 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中做到这一点。

【问题讨论】：

你可以试试ng-deepblog.angular-university.io/angular-host-context
如何确定进度？我们需要看到更多（至少是关于 html 的内容）才能知道什么是可能的。
@enno.void 它不会工作，因为 ng-reflect-active 在 prod 模式下不存在

标签： css angular typescript

【解决方案1】：

您可以在general sibling combinator (~) 的帮助下模拟选择所有元素之前 的行为：

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

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

Stackblitz Example

【讨论】：