Как изменить цвет углового материала шагового шага иконки

Question

В шаговом компоненте углового материала каждый шаг представлен значком в кругу. Цвет фона этого круга устанавливается в соответствии с основным цветом темы. Можно ли изменить этот цвет на акцентный цвет темы? Я попытался установить color="accent" как для компонента mat-horizontal-stepper, так и для каждого компонента mat-step, но ни один из них не дал никакого эффекта, и я не вижу цветного ввода в документации.

Answer 1

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>

Answer 2

Используя Ionic v4, в моем случае просто добавили (внутри: root):

  .mat-step-header .mat-step-icon-selected {
    background-color: var(--ion-color-primary);
  }

В файл variables.scss.

Answer 3

Похоже, что нет возможности изменить цвет значка матового степпера, вы можете использовать этот 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"
           ]

примечание степпер примет цвет основного цвета

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

Пользовательский класс темы может использоваться в любом приложении, просто обернуть любой компонент материала и использовать атрибут цвета primary, accent или warn, как определено в классе. Компонент, обернутый в пользовательский класс, будет использовать этот цвет, если не цвет установлен из глобальной темы.