css - Angular Material Snackbar 更改颜色
问题描述
我正在使用带有 Material Snackbar 的 Angular 7。我想将 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 不起作用?
解决方案
你应该在你的主 style.scss 上写那个.notif-success
CSS 类,而不是 app.component.scss。
如果您想知道,它与您的 index.html、package.json 等位于同一目录级别。
推荐阅读
- pycharm - 我有一个用于工作的 PyCharm 专业版,它会记录我在其中编写的所有内容吗?
- svelte - Svelte:在“每个”块中使用“bind:this”
- git - 如何使`git log`默认显示CommitDate而不是AuthorDate?
- javascript - React-Redux 错误请求错误 (404) 但仍从 Schema 中保存数据
- spring-boot - Spring Boot 层 jar 和构建包
- java - 2 类随机数的抽奖
- java - 石头、纸、剪刀游戏的算法
- git - 从多个提交中删除同一个文件,使其不在 PR
- python - 如何在 tkinter 中创建带有下拉菜单的条目?
- google-cloud-platform - Google AI Platform VM 似乎不包含官方模型存储库