css - Angular Material Snackbar 改变颜色

Question

我正在使用带有 Material Snackbar 的 Angular 7。我想将 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

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

如果您想知道，它就是与您的 index.html、package.json 等处于同一目录级别的文件。