如何更改角材步进器步骤图标的颜色 [英] How to change color of angular material stepper step icons

问题描述

在角材步进器组件中，每个步骤都由一个圆圈图标表示.此圆圈的背景色设置为主题的原色.是否可以将此颜色更改为主题的强调色?我尝试在mat-horizontal-stepper组件和每个mat-step组件上都设置color="accent"，但是没有一个起作用，并且我在文档中看不到颜色输入.

In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.

推荐答案

似乎没有选择更改垫子步进器图标颜色的选项，您可以使用此CSS作为解决方法.

There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.

 ::ng-deep .mat-step-header .mat-step-icon-selected {
    background-color: red; 
 }

:: ng-deep 已过时，可以删除，也可以使用

::ng-deep is deprecated and can be removed, also can be used

ViewEncapsulation.None ，以避免使用:: ng-deep

ViewEncapsulation.None in component decorator to avoid using ::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中的样式

create theme.scss file and add it to styles in angular.json

 "styles": [
          "src/styles.css",
          "src/theme.scss"
           ]

注释步进器将采用原色

theme.scss

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

自定义主题类可以在整个应用程序中使用，只需包装任何材料组件，并使用在类中定义的主，强调或警告颜色属性. 如果不在全局主题中设置颜色，则包装在自定义类中的组件将使用该颜色.

Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class. Component that is wrapped in custom class wil use that color, if not color are set from global theme.

这篇关于如何更改角材步进器步骤图标的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！