Angular 5和材质 - 如何从SnackBar组件更改背景颜色

Question

我必须从快餐栏组件更改背景.我正在使用它来警告或通知用户有关用户所做的某些错误或已完成的操作.

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

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

panelClass:string | string []要添加到小吃店容器的额外CSS类.

这是我在css文件中添加的内容.

.mycsssnackbartest {
  background-color: blue;
}

这是打开小吃店的代码

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

我究竟做错了什么？

Answer 1

你必须使用panelClass选项(从v6开始)在快餐栏上应用类,如下所示:

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

CSS(在styles.scss中):

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

请参阅Stackblitz示例

Answer 2

使用主题：

基本的：

this.snackBar.open('Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']
});

切换：'mat-primary'到'mat-accent'或'mat-warn'

Answer 3

//in component.ts
this.snackbar.open(message, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
 });
//in component.css
::ng-deep .warning{
   background: 'yellow';
}

Answer 4

是的，在全局样式文件（.css）中添加 ::ng-deep 之后，每个属性都可以正常工作......如下

noMatchConfig: MatSnackBarConfig = {
    duration: 2000,
    horizontalPosition: 'right',
    verticalPosition: 'top',
    panelClass:['redNoMatch']
  }



::ng-deep .redNoMatch
{
  color:white;
  background: #F44336 !important;
}