☰

angular 5 matsnackbar アクションボタンの色を変更する 質問する

tag-icon • tag-icon angular-material angular5
angular 5 matsnackbar アクションボタンの色を変更する 質問する

Angular 5 プロジェクトで MatSnackBar を使用していますが、「アクション」ボタンの色を変更できないようです。

スナック バーを HttpInterceptor に挿入しました。

    this.snackBar.open('Invalid Login', 'Ok', {
                    duration: 2000,
                    panelClass: ['my-snack-bar']
                });

私のCSS:

    .my-snack-bar {
        background-color: #E8EAF6;
        color: #3D5AFE;
    }

「OK」アクションボタンの色を変更するにはどうすればよいですか?

ベストアンサー1

バージョン: "@angular/material": "^5.2.4",

panelClass オプション + 生成されたクラス「.mat-simple-snackbar-action」を使用して色にアクセスできます。

私の例:

スナックバー.コンポーネント.ts

  private configSuccess: MatSnackBarConfig = {
    panelClass: ['style-success'],    
  };

  private configError: MatSnackBarConfig = {
    panelClass: ['style-error'],
  };

  public snackbarSuccess(message) {
    this.snackBar.open(message, 'close', this.configSucces);
  }

  public snackbarError(message) {
    this.snackBar.open(message, 'close', this.configError);
  }

スナックバー.コンポーネント.css

  .style-success {
    color: $primary-text;
    background-color: $primary;
  }
  .style-success .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }

追加情報カスタム テーマのミックスインを使用する場合は、次のようにしてすべての色を取得できます。

@mixin snackbar($theme) {
  $primary: mat-color(map-get($theme, primary));
  $primary-text: mat-color(map-get($theme, primary), default-contrast);
  $warn: mat-color(map-get($theme, warn));
  $warn-text: mat-color(map-get($theme, warn), default-contrast);

  .style-success {
    color: $primary-text;
    background-color: $primary;
  }
  .style-success .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }
}

おすすめ記事