web-dev-qa-db-ja.com

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」アクションボタンの色を変更するにはどうすればよいですか？

angular-materialangular5
11
Kang Bin Kim

バージョン： "@ angular/material"： "^ 5.2.4"、

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

私の例：

snackbar.component.ts

  private configSucces: MatSnackBarConfig = {
    panelClass: ['style-succes'],    
  };

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

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

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

snackbar.component.css

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .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を使用している場合は、次のようにしてすべての色を取得できます。

@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-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }
}
9
PVermeer

これは私のために働いた：

.my-snack-bar button {
    background-color: gray;
    color: white;
}
5
Steig

これを使って

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

style.css（または.scss）ファイルのcss。他の場所に置くと機能しません。

2
JpG

上記のように、panelClass構​​成を使用してスナックバーのスタイルをカスタマイズできます。

this.snackBar.open(message, action, {
            duration: 40000,
            panelClass: "success-dialog"
        });

ここで重要なのは、CSSを介してmat-simple-snackbar-actionをオーバーライドすることです。これにより、アクションボタンのテキストの色を変更できます。

.success-dialog {
    color: white !important;
    background-color: $success !important;
    .mat-simple-snackbar-action {
        color: white !important;
    }
}
2
velval

Steigの答えは正しいですが、それがうまくいかない場合は、/deep/クラスの前：

/deep/ .my-snack-bar button {
    background-color: gray;
    color: white;
}
0
azatprog