在 angular material stepper 组件中，每一步都由一个圆圈中的图标表示。这个圆圈的背景颜色设置为主题的原色。是否可以将此颜色更改为主题的强调色？我尝试在mat-horizontal-stepper 组件和每个mat-step 组件上设置color="accent"，但都没有任何效果，而且我在文档中看不到颜色输入。
【问题讨论】：
theming来改变它。
标签： angular angular-material material-design
似乎没有更改垫子步进图标颜色的选项，您可以使用此 css 作为解决方法。
::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}
::ng-deep 已弃用，可以删除，也可以使用
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);
}
自定义主题类可以跨应用程序使用，只需包装任何材质组件并使用类中定义的主要颜色属性、重音或警告。 包装在自定义类中的组件将使用该颜色，如果不是从全局主题设置颜色。
【讨论】：
当然，您可以使用自己的 CSS 并自定义背景和前景色。不需要::ng-deep。 （/deep/ 和 ::ng-deep 目前都已弃用）
添加了几个 SCSS，这就是我的步进器的外观：我添加了自定义标签和图标所需的 SASS sn-ps：
已完成的步骤及其标签：
.mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: transparent !important;
color: $success;
+.mat-step-label{
color: $success !important;
}
}
进行中步骤及其标签：
.mat-step-header .mat-step-icon-selected{
// background-color: $primary;
background-color: transparent !important;
color: $primary;
+.mat-step-label{
color: $primary !important;
}
}
待办事项/默认步骤及其标签：
.mat-step-header .mat-step-label{
color: rgba(0, 0, 0, .54)
}
.mat-step-header .mat-step-icon {
color: rgba(0, 0, 0, .54);
background-color: transparent;
}
用于覆盖默认图标的 HTML： 我使用了很棒的字体图标来覆盖默认值：
<mat-horizontal-stepper>
<!-- Icon overrides. -->
<ng-template matStepperIcon="edit">
<i class="fa fa-check-circle"></i>
</ng-template>
<ng-template matStepperIcon="active">
<i class="fa fa-dot-circle-o"></i>
</ng-template>
<ng-template matStepperIcon="done">
<i class="fa fa-dot-circle-o"></i>
</ng-template>
<ng-template matStepperIcon="number">
<i class="fa fa-dot-circle-o"></i>
</ng-template>
</mat-horizontal-stepper>
注意：所有 SCSS 都应该在全局样式表中，而不是在组件特定的样式表中。如果样式存在于 Angular 组件的文件中，由于视图封装，它将不会被应用。 p>
如果需要，请在 SCSS 文件的开头定义颜色变量，如下所示：将 HEX 值替换为您的主题颜色。
$success: #35A255 !default;
$primary: #007CBB !default;
【讨论】：
Undefined variable. 指向color。你能提供你的 .scss 文件吗？
error = true; .preenchimento-incompleto {
background-color: black !important;
}
.preenchimento-ok {
background-color: greenyellow !important;
}<mat-step id="idDadosPessoaisFormGroup5" name="idDadosPessoaisFormGroup5" [ngClass]="error ? 'preenchimento-incompleto' : 'preenchimento-incompleto'" [stepControl]="dadosPessoaisFormGroup">
<form [formGroup]="dadosPessoaisFormGroup">
<ng-template matStepLabel>DADOS<br> PESSOAIS</ng-template>
<app-dados-pessoais [container]="stepper"></app-dados-pessoais>
</form>
</mat-step>【讨论】：
使用 Ionic v4，在我的例子中刚刚添加（在 :root 中）：
.mat-step-header .mat-step-icon-selected {
background-color: var(--ion-color-primary);
}
到 variables.scss 文件。
【讨论】：
在您的组件的 scss 文件中执行以下操作：
::ng-deep {
.mat-focused .mat-form-field-label {
color: green;
}
.mat-form-field-underline {
background-color: green;
}
.mat-form-field-ripple {
background-color: green;
}
}
为什么你应该使用 ng-deep 而不是 ViewEncapsulation.none
Disabling effect of ViewEncapsulation.None in Angular
https://medium.com/ng-gotchas/piercing-the-angular-style-encapsulation-c7030caeb519
【讨论】：