Question

我必须从快餐栏组件更改背景。我使用它来提醒或告知用户有关用户所犯的错误或已完成的操作。

项目的材料版本。＆＃34; @ angular / material＆＃34;：＆＃34; ^ 5.0.0-rc.1＆＃34;，

文档https://material.angular.io/components/snack-bar/api说明了改变课程的api。

panelClass：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 example

Answer 2

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

Answer 3

使用主题：

主要：

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

切换：将“ mat-primary”切换为“ mat-accent”或“ mat-warn”

Answer 4

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

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



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

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

4 个答案: