我正在使用 Angular 7 和 Material Snackbar。我想将 Snackbar 的颜色更改为绿色。
在 app.component.ts 中,我有:
this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
duration: 4000,
verticalPosition: 'top',
panelClass: 'notif-success'
});
this.snackBarRef.onAction().subscribe(() => {
this.snackBarRef.dismiss();
});
在 app.component.scss 中,我有:
.notif-success {
color: #155724 !important; // green
background-color: #d4edda !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}
但 Snackbar 仍以其默认颜色显示。
我可以看到notif-success类已经应用到了snackbar上
<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">
为什么自定义CSS不起作用?
你应该这样写.notif-success
主 styles.scss 上的 CSS 类,而不是 app.component.scss。
如果您想知道,它与您的 index.html、package.json 等位于同一目录级别。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)