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.
面板类:字符串 |细绳[]要添加到小吃店容器的额外 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(在全局 style.scss 中):
CSS (in global styles.scss):
.blue-snackbar {
background: #2196F3;
}
这篇关于Angular 5 和材质 - 如何从 SnackBar 组件更改背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!