Angular 5和材质-如何从SnackBar组件更改背景颜色 [英] Angular 5 and material - How to change the background color from SnackBar component

问题描述

我必须更改小吃栏组件的背景. 我正在用它来警告或通知用户有关用户执行的某些错误或已完成的操作.

I have to change the background from the snackbar component. I'm using it to alert or inform the user about some either error or completed action the user did.

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

The material version from the project. "@angular/material": "^5.0.0-rc.1",

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

The documentation https://material.angular.io/components/snack-bar/api say about an api to change the class.

panelClass:字符串|细绳[] 在小吃店容器中添加了额外的CSS类.

panelClass: string | string[] Extra CSS classes to be added to the snack bar container.

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

This is what I add in the css file.

.mycsssnackbartest {
  background-color: blue;
}

这是打开小吃店的代码

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

我在做什么错了?

推荐答案

您必须使用panelClass选项(自v6开始)将类应用于快餐栏，如下所示:

You have to use the panelClass option (since v6) to apply classes on a snackbar like this:

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

CSS(以global styles.scss为基础):

CSS (in global styles.scss):

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

请参见 Stackblitz示例

这篇关于Angular 5和材质-如何从SnackBar组件更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！