角度5和材质-如何改变 SnackBar 组件的背景颜色

我必须改变背景从零食栏组件。我使用它来提醒或通知用户一些错误或用户已完成的操作。

项目的实质性版本。 “@棱角/材料”: “ ^ 5.0.0-rc 1”,

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

String | string [] 要添加到快餐店容器中的额外 CSS 类。

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

.mycsssnackbartest {
background-color: blue;
}

这是打开快餐吧的代码

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

我做错了什么？

81039 次浏览

小开

最佳答案

您必须使用 panelClass选项(自第6版以来)才能像下面这样在快餐栏上应用类:

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

CSS (在 global styles.scss 中) :

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

看看 Stackblitz 的例子

小开

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

小开

使用主题:

小学:

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

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

小开

在添加: : ng-deep in global style file (. css)之后，在每个属性之后都可以正常工作... ... 如下所示

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






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

小开

这也可以通过在 app.module.ts中进口 MAT_SNACK_BAR_DEFAULT_OPTIONS在全球范围内实现:

应用程序模块

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


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

Stylescss

.mycsssnackbartest {
background-color: blue;
}