如何更改角材料步進器步驟圖標的顏色

Question

在角度材料步進器組件中，每個步驟都由圓圈中的圖標表示。 該圓圈的背景顏色設置為主題的主要顏色。 是否可以將此顏色更改為主題的強調色？ 我嘗試在mat-horizontal-stepper組件和每個mat-step組件上設置color="accent" ，但都沒有任何效果，而且我在文檔中沒有看到顏色輸入。

Answer 1

似乎沒有更改墊子步進器圖標顏色的選項，您可以使用此 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);
 }

自定義主題類可以跨應用程序使用，只需包裝任何材料組件並使用類中定義的顏色屬性primary、accent 或warn。 包裝在自定義類中的組件將使用該顏色，如果不是從全局主題設置顏色。

Answer 2

 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 3

當然，您可以使用自己的 CSS 並自定義背景和前景色。 不需要 ::ng-deep。 （/deep/ 和 ::ng-deep 目前都已棄用）

使用幾個 SCSS，這是我的步進器的外觀：我添加了自定義標簽和以下圖標所需的 SASS 片段：

完成的步驟及其標簽：

.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 都應該在全局樣式表中，而不是在組件特定的樣式表中。 如果樣式存在於角度組件的文件中，由於視圖封裝，它不會被應用。

如果需要，請在 SCSS 文件的開頭定義顏色變量，如下所示： 用您的主題顏色替換十六進制值。

$success:       #35A255 !default;
$primary:       #007CBB !default;

Answer 4

使用 Ionic v4，在我的例子中剛剛添加（在 :root 內）：

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

到 variables.scss 文件。

Answer 5

在您的 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

Angular 中 ViewEncapsulation.None 的禁用效果

https://medium.com/ng-gotchas/piercing-the-angular-style-encapsulation-c7030caeb519