无涯教程网

Html MatSnackBar： colored颜色不起作用

发布于01月16日

我在向MatSnackBar添加一个css类时遇到了问题.

this._snackBar.open('✔ Saved', '', {
  duration: 3000,
  horizontalPosition: 'right',
  panelClass: ['snackbar-success']
});

.snackbar-success
  background: $success
  color: #fff

它以前是可以工作的，但自从我将Angular material 更新到17.0.4后，它不再工作了.我现在已经更新到17.0.5，但它仍然不能工作.

基本上，正在添加css类，但它没有任何效果.它似乎被添加到了错误的位置.

这是我在DOM中看到的:

display: none !important可以，但在我的例子中我使用的是 colored颜色 .我试了color、background、background-color，都是!important，但都不管用.

是我做错了什么，还是这是个错误？

推荐答案

下面是如何更改Mat-Snackbar colored颜色的方法:

.mat-mdc-snack-bar-container.snackbar-success {
  --mat-mdc-snack-bar-button-color: #fff;
  --mdc-snackbar-container-color: #28a745;
  --mdc-snackbar-supporting-text-color: #fff;
}

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

传单自定义标记(divIcon)html/css不适用

如何收集<；p&>元素下的<；p>；子元素

风格规则应该适用于响应图像的哪些方面？哪种规则适用于<；图片和gt；，哪种规则适用于<；img>；？

如何用等宽字体固定数字在有序列表中的位置

来自元标记的响应文本

带有图像的虚线边框

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

太多的 Web 视图实例导致手机过热 Swift

perl hdb 调试器：浏览器以错误的编码显示 UTF-8 源代码

如何用js和CSS在两点之间画一条线

并排对齐两个文本区域列

获取链接到功能的网页表单

如何只为 Navbar 中的一个元素提供动画，其余元素没有使用 css 的动画

如何在Bootstrap卡片底部添加波浪形状

水平对齐两列中的两个按钮同一级别

为什么图像会影响我的
大小？

如何将我的输入值固定到 2022 年 12 月？

用 flexbox 和 overflow 覆盖

是否可以在换行时向锚标记添加填充？

实用课程推荐

相关教程推荐