web-dev-qa-db-ja.com

angularマテリアルステッパーステップアイコンの色を変更する方法

angularマテリアルステッパーコンポーネントでは、各ステップは円のアイコンで表されます。この円の背景色は、テーマの原色に設定されます。この色を変更することは可能ですか？テーマのアクセントカラーに？設定してみましたcolor="accent"両方のmat-horizontal-stepperコンポーネントと各mat-stepコンポーネントですが、どちらも効果がなく、ドキュメントに色の入力がありません。

angularangular-materialmaterial-design
5
phelhe

マットステッパーアイコンの色を変更するオプションがないようです。回避策としてこの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);
 }

カスタムテーマクラスは、アプリケーション全体で使用できます。マテリアルコンポーネントをラップし、クラスで定義されている色属性のプライマリ、アクセント、または警告を使用します。カスタムクラスでラップされたコンポーネントは、その色を使用します。色がグローバルテーマから設定されていない場合。

10
Nenad Radak

コンポーネントの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;
    }
 }

ViewEncapsulation.noneの代わりにng-deepを使用する必要がある理由

AngleでViewEncapsulation.Noneの効果を無効にする

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

1
devpato
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>
1
Sandro

Ionic v4を使用します。私の場合、（：root内に）追加しました：

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

Variables.scssファイルに。

0
RicardoVallejo