Angular Material Snackbar 變色

Question

我將 Angular 7 與 Material Snackbar 一起使用。 我想將 Snackbar 的顏色更改為綠色。

在 app.component.ts 中，我有：

this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
    duration: 4000,
    verticalPosition: 'top',
    panelClass: 'notif-success'
});

this.snackBarRef.onAction().subscribe(() => {
    this.snackBarRef.dismiss();
});

在 app.component.scss 中，我有：

.notif-success {
    color: #155724 !important; // green
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    .mat-simple-snackbar-action {
        color: #155724 !important;
    }
}

但 Snackbar 仍以其默認值 colors 顯示。

我可以看到 notif-success class 已經應用到 snackbar

<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">

為什么自定義 css 不起作用？

Answer 1

你應該在你的主styles.scss而不是app.component.scss上編寫.notif-success CSS類。

如果您想知道，它是與您的 index.html、package.json 等位於同一目錄級別的那個。

Answer 2

可以通過將此 CSS 規則添加到 styles.css 文件來自定義 MatSnackBar colors。 針對 Angular 材料 15 進行了測試。

.mat-mdc-snack-bar-container {
    --mat-mdc-snack-bar-button-color: red;
    --mdc-snackbar-container-color: black;
    --mdc-snackbar-supporting-text-color: yellow;
}

Answer 3

代替：

panelClass: 'notif-success'

嘗試：

extraClasses: ['notif-success']

我遇到了同樣的問題，並偶然發現了這個Stackblitz有一個工作示例。

剛剛意識到extraClasses已被棄用，這里接受的答案可能更好。

Answer 4

這就是你要找的：

::ng-deep .mat-snack-bar-container{
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}
::ng-deep .mat-simple-snackbar-action {
  color: red;
}

在這里完成工作演示

Answer 5

如@Akber Iqbal 所述，::ng-deep 已被棄用。 將以下代碼放在全局css或scss中

snack-bar-container.mat-snack-bar-container {
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}

div.mat-simple-snackbar-action {
  color: red !important;
}

此樣式代碼適用於 @angular/material@11.2.2 和 @angular/core@11.2.3
注意：它在組件 css 或 scss 中不起作用

Answer 6

在 Angular 15 中， Egemen Çiftci 的答案是唯一對我有用的答案。 我擴展它以支持不同的背景 colors 成功和錯誤通知：

this.snackBar.open('Success', 'Close', {
  panelClass: 'app-notification-success',
};

this.snackBar.open('Error', 'Close', {
  panelClass: 'app-notification-error',
};

在全局styles.scss ：

.mat-mdc-snack-bar-container {
  --mat-mdc-snack-bar-button-color: #ffffff;
  --mdc-snackbar-supporting-text-color: #ffffff;

  &.app-notification-error {
    --mdc-snackbar-container-color: #f23a2f;
  }

  &.app-notification-success {
    --mdc-snackbar-container-color: #43a446;
  }
}

Answer 7

“panelClass”styles 未應用於 v15 中的 Snack Bar，這是因為在 v15 中背景顏色位於不同的元素上。

在.css文件

.style-error {
    color: white;
    --mdc-snackbar-container-color: #FF005D !important;
}

In.ts文件

openSnackBar(message: string, type:string) {    

    this._snackBar.open(message,'Ok', {
      duration: 2000,     
      panelClass: ["style-error"]
    });
}

上面的代碼適用於 Angular v15。