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

【问题标题】：Angular 5 and material - How to change the background color from SnackBar componentAngular 5 和材料 - 如何从 SnackBar 组件更改背景颜色
【发布时间】：2018-05-13 15:05:57
【问题描述】：

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

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

https://material.angular.io/components/snack-bar/api 的文档提到了一个用于更改类的 api。

面板类：字符串 |细绳[] 将额外的 CSS 类添加到小吃店容器中。

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

.mycsssnackbartest {
  background-color: blue;
}

这是打开快餐栏的代码

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

我做错了什么？

【问题讨论】：

MatSnackBarConfig 有一个名为 extraClasses 的字段“要添加到小吃店容器的额外 CSS 类。”您正在使用不存在的panelClass
如果在 api 文档中找到 panelClass。 material.angular.io/components/snack-bar/api。我没有使用 extraClasses，因为文档说它已被弃用。但我要测试一下。谢谢。

标签： angular angular-material2

【解决方案1】：

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

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

CSS（在全局 styles.scss 中）：

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

见Stackblitz example

【讨论】：

非常感谢。有效。我没有使用 scss 文件。我试图在组件的 css 文件中设置它。
从材料 6 开始，extraClasses 已被弃用。 panelClass 应该提供相同的功能。
@BrianStanley 谢谢，我相应地更新了示例和答案！
如果没有 !important 的背景颜色就无法工作。
我必须在 css 规则中添加 !important 才能使其正常工作

【解决方案2】：

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

【讨论】：

我正在使用 Angular 7，这对我有用，而不是公认的答案。您必须在 css 中的类名前面添加 ::ng-deep。非常感谢！
::ng-deep 已弃用，Angular angular.io/guide/component-styles 未来将不再支持
在这种情况下我们应该改用什么？
@An-droid，Angular 尚未设置删除版本，因为还没有替换选项（angular.io/guide/deprecations）。但我建议将全局样式（通过 styles.scss）与 panelClass 选项结合使用，而不是组件特定样式
通过给它一个面板类，你可以给它更具体的样式，从而覆盖材料样式：.mat-snack-bar-container.warning { background-color: red }。

【解决方案3】：

使用主题：

初级：

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

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

【讨论】：

这应该是公认的答案，因为它通过使用主题正确地做到了。
@PurplePiranha 我不同意，mat-toolbar 是角材料的另一个元素，使用此配置更改了我的 mat-snackbar 上的字体大小，这并不是真正的意图。不过在某些情况下可能很有用......
这只是一个（在我看来不好的）解决方法，因为它使用不同元素的类来设置小吃栏的样式。例如，OK 按钮看起来很奇怪，因为它不受这种方法的样式的影响。最好创建自己的类并将其放入全局 styles.scss （如已接受的答案所建议的那样）

【解决方案4】：

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

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



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

【讨论】：

【解决方案5】：

这也可以通过在app.module.ts中导入MAT_SNACK_BAR_DEFAULT_OPTIONS来全局实现：

app.module.ts

import {
  MatSnackBarModule,
  MAT_SNACK_BAR_DEFAULT_OPTIONS,
} from '@angular/material/snack-bar';

@NgModule({
  providers: [
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { panelClass: ['mycsssnackbartest'] },
    },
  ],
})

styles.css

.mycsssnackbartest {
  background-color: blue;
}

【讨论】：