angular-material - angular 5 matsnackbar 更改操作按钮颜色

Question

我将 MatSnackBar 用于我的 angular 5 项目，我似乎无法更改“操作”按钮的颜色。

我已经将 snackbar 注入(inject)到我的 HttpInterceptor 中:

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

我的CSS:

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

如何更改“确定”操作按钮的颜色？

Answer 1

版本:“@angular/material”:“^5.2.4”，
您可以使用 panelClass 选项 + 生成的类“.mat-simple-snackbar-action”访问颜色。
我的例子:
小吃吧.component.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);
  }

小吃吧.component.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 用于自定义主题，您可以执行以下操作来获取所有颜色:

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