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 仍然以其默认颜色显示。

我可以看到notif-success 类已经应用到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

你应该这样写 .notif-success在主styles.scss 上CSS 类，而不是在app.component.scss 上。

如果您想知道，它是与您的 index.html、package.json 等位于同一目录级别的那个。

Answer 2

在 Angular 15 中，Egemen \xc3\x87iftci 的回答是唯一适合我的答案。我将其扩展为支持成功和错误通知的不同背景颜色：

\n

this.snackBar.open(\'Success\', \'Close\', {\n  panelClass: \'app-notification-success\',\n};\n\nthis.snackBar.open(\'Error\', \'Close\', {\n  panelClass: \'app-notification-error\',\n};\n

\n

在全球范围内styles.scss：

\n

.mat-mdc-snack-bar-container {\n  --mat-mdc-snack-bar-button-color: #ffffff;\n  --mdc-snackbar-supporting-text-color: #ffffff;\n\n  &.app-notification-error {\n    --mdc-snackbar-container-color: #f23a2f;\n  }\n\n  &.app-notification-success {\n    --mdc-snackbar-container-color: #43a446;\n  }\n}\n

\n

Answer 3

可以通过将此 CSS 规则添加到 styles.css 文件来自定义 MatSnackBar 颜色。已针对角度材料 15 进行测试。

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