角度5 matsnackbar更改动作按钮颜色

Question

我正在使用MatSnackBar作为我的角度5项目,我似乎无法改变"动作"按钮的颜色.

我把小吃店注入我的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"访问颜色.

我的例子:

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

Answer 2

如上所述，可以使用 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;
    }
}

Answer 3

请在应用程序中添加以下内容style.css

.mat-simple-snackbar { font-weight: 600; } // text     
.mat-simple-snackbar-action > button { color: red } // action

享受！

Answer 4

用这个

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

css 在你的 style.css（或 .scss）文件中。如果你把它放在其他地方，它将不起作用。

Answer 5

这为我工作：

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