角材料小吃店更改颜色

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类已应用于小吃栏

<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

代替：

panelClass: 'notif-success'

尝试：

extraClasses: ['notif-success']

我遇到了同样的问题，偶然发现了这个Stackblitz，上面有一个可行的例子。

刚意识到extraClasses已过时，此处接受的答案可能更好。

Answer 3

这就是您要寻找的：

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

完成working demo here

Answer 4

如@Akber Iqbal 所述，

::ng-deep 已被弃用。将以下代码放在global 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中不起作用