首页 文章

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

提问于
浏览 次
12

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

项目的材料版本 . “@ angular / material”：“^ 5.0.0-rc.1”，

文档https://material.angular.io/components/snack-bar/api说关于改变 class 的api .

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

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

.mycsssnackbartest {
  background-color: blue;
}

这是打开小吃店的代码

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

我究竟做错了什么？

angular angular-material2

2 回答

  • 1

    您必须使用 panelClass 选项（自v6起）才能在快餐栏上应用类，如下所示：

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

    CSS（在styles.scss中）：

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

    见Stackblitz example

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

相关问题