代码之家 › 专栏 › 技术社区 › xRay

MatSnackBar:颜色没有效果

angular-material angular css html

xRay · 技术社区 · 2 年前

我在向添加CSS类时遇到问题 MatSnackBar .

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 有效,但在我的情况下,我使用的是颜色。我试过了 color , background , background-color ,以及所有的 !important 但它们都不起作用。

是我做错了什么,还是这是个bug?

1 回复 | 直到 2 年前

ferhado 2 年前

以下是如何更改垫子零食条的颜色:

.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;
}

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前