Angular 5 和 Material - 如何更改 SnackBar 组件的背景颜色

Question

我必须更改 snackbar 组件的背景。我用它来提醒或通知用户用户执行的某些错误或已完成的操作。

项目的 Material 版本。"@angular/material": "^5.0.0-rc.1",

文档 https://material.angular.io/components/snack-bar/api说一个 API 来改变类。

面板类:字符串 |字符串[]要添加到 snackbar 容器的额外 CSS 类。

这是我在css文件中添加的。

.mycsssnackbartest {
  background-color: blue;
}

这是打开snackbar的代码

this.snackBar.open('Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

我做错了什么？

Answer 1

您必须使用 panelClass 选项(自 v6 起)在 snackbar 上应用类，如下所示:

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS(在全局 styles.scss 中):

.blue-snackbar {
  background: #2196F3;
}

参见 Stackblitz example