如何改变角形小吃店的颜色？

Question

我正在使用SnackBar，当有人注销时显示一条消息。以下是代码，我试图将面板的颜色从深灰色更改为另一种颜色，我找到了此解决方案：

  

panelClass：['danger']

应该将面板的颜色更改为红色（危险），但这不起作用：

  message: string = 'You Have Logged out.';
  open() {
    this.snackBar.open(this.message, '', {
      duration: 2000,
      panelClass: ['danger'],
   });
  }

如何将面板颜色更改为其他颜色？

Answer 1

如果您使用@angular：

1-创建一个全局CSS类

.custom-css-class {
  background-color: brown;
}

如果您不想创建全局样式，请在组件装饰器上设置encapsulation: ViewEncapsulation.None，以在其中使用具有自定义背景色的小吃店：

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
export class SagaSnackbarComponent {

2-通过在配置上传递类来调用小吃店服务

constructor(private _snackBar: MatSnackBar) {}

...

this._snackBar.open(message, action, {
      panelClass: 'custom-css-class'
    });

在这里您可以看到它在stackblitz demo中工作。