css - 在 Angular 7 中动态更改 snackbar 的颜色

Material Snackbar 的颜色没有改变

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SnackbarService {

  constructor(public snackBar: MatSnackBar) {
  }
  show(message: string, type?: string, duration?: any) {
    this.snackBar.open(message, type, {
      duration: duration ? duration : 2000,
      panelClass: [type],
    });
  }
}

这是调用，=> this.snack.show(response.message, "success", 3000)

CSS 类

.info {
    background: #2196F3;
}
.success {
    background: #1DE9B6;
}
.error {
    background: #B00020;
}

但是没有任何 CSS 类被应用到出现的任何 Snackbar 上

答案＃1

尝试在编写类 .info .success .error 时使用 ::ng-deep

还可以尝试在 CSS 中使用 background-color 而不是 background

已更正的代码

::ng-deep .info {
    background-color: #2196F3;
}
::ng-deep .success {
    background-color: #1DE9B6;
}
::ng-deep .error {
    background-color: #B00020;
}

答案＃2

你需要为 panelClass 传递类名。返回 0 的 type 不会起作用

  panelClass: ['info'],