Angular 5 matsnackbar 更改操作按钮颜色

Question

我正在为我的 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;
    }

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

Answer 1

版本：“@angular/material”：“^5.2.4”，

您可以使用 panelClass 选项+生成的类“.mat-simple-snackbar-action”访问颜色。

我的例子：

snackbar.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);
  }

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

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

这对我有用：

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

Answer 4

用这个

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

style.css（或.scss）文件中的

css。如果放在其他地方就不起作用。

Answer 5

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

style.css

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

享受！

Answer 6

对我来说，下面的代码是有效的。

::ng-deep snack-bar-container simple-snack-bar .mat-simple-snackbar-action {
  color: black;
}

Answer 7

Steig 的答案是正确的，但如果这不起作用，那么你应该在班级前面添加

/deep/

：

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

Answer 8

您可以使用这个：

let mysnackbar: any = document.querySelectorAll('.my-snack-bar')[0];
    mysnackbar.style.cssText += "color: #3D5AFE;backgroundColor: #E8EAF6";

它对我有用。

Answer 9

一种简单的方法是覆盖

panelClass

的颜色变量，在

style.scss

:

.my-snackbar-panel-class {
  --mat-snack-bar-button-color: lightgreen;
}