如何以角度更改小吃店的颜色？

Question

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

panelClass: ['危险']

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

  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 演示中工作。