Angular 5和material - 如何从SnackBar组件更改背景颜色

Question

我需要改变 snackbar 组件的背景。我使用它来向用户警告或通知他们某些错误或已完成的操作。

项目中使用的材料版本为："@angular/material": "^5.0.0-rc.1"。

文档 https://material.angular.io/components/snack-bar/api 中提到了一个 API 可以用来更改类。

panelClass: string | string[] 可以添加到 snackbar 容器中的额外 CSS 类。

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

.mycsssnackbartest {
  background-color: blue;
}

这是打开消息提示框的代码

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

我做错了什么？

- andre luis borges de paula

---

MatSnackBarConfig有一个名为extraClasses的字段，“要添加到snack bar容器的额外CSS类。” 您正在使用panelClass，但它不存在。 - J-R Choiniere

如果在API文档中找到panelClass。https://material.angular.io/components/snack-bar/api。我没有使用extraClasses，因为文档说它已被弃用。但我将进行测试。谢谢。 - andre luis borges de paula

Answer 1

Angular < V15

你必须使用panelClass选项（自v6起）来应用类到snackbar，就像这样：

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

CSS（在全局 styles.scss 中）：

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

看一下Stackblitz示例

Angular >= v15

Angular团队确实添加了全局CSS变量

所以你仍然需要添加panelClass，并且可以像这样将其添加到CSS中

  .mat-mdc-snack-bar-container {
    &.blue-snackbar {
      --mdc-snackbar-container-color: #2196f3;
      --mat-mdc-snack-bar-button-color: #fff;
      --mdc-snackbar-supporting-text-color: #fff;
    }
  }

- Philipp Kief

---

非常感谢。它起作用了。我没有使用scss文件。我试图在组件的css文件中设置它。 - andre luis borges de paula

从Material 6开始，extraClasses已被弃用。panelClass应该提供相同的功能。 - Brian Stanley

@BrianStanley 谢谢，我已经更新了例子和我的回答！ - Philipp Kief

没有!important，背景颜色无法生效。 - tchap

我不得不在CSS规则中添加!important，以使其正常工作。 - Giovanni Avila

Answer 2

使用主题：

主要：

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

将Switch:'mat-primary'替换为'mat-accent'或'mat-warn'

- FranSanchis

---

这应该真正成为被接受的答案，因为它通过使用主题来正确地实现了它。 - Purple Piranha

我不同意，mat-toolbar 是 Angular Material 的另一个元素，使用此配置会改变我的 mat-snackbar 上的字体大小，这并不是真正想要的。虽然在某些情况下可能有用... - A. Markóczy

这只是一种（在我看来不好的）解决方法，因为它使用了与样式Snackbar不同的元素的类。例如，使用此方法对于确定按钮来说会看起来很奇怪，因为它没有受到样式的影响。最好是自己创建一个类并将其放入全局styles.scss中（如所接受的答案所建议）。 - Tobias Kaufmann

Answer 3

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

- shreekar hegde

---

我正在使用 Angular 7，这对我有用，而不是被接受的答案。你必须在 CSS 中的类名前面添加 ::ng-deep。非常感谢！ - muzurB

::ng-deep已经被弃用，并且在未来的Angular版本中将不再支持。https://angular.io/guide/component-styles - tif

在这种情况下，我们应该使用什么替代方案？ - An-droid

@An-droid，Angular 尚未设置用于删除的版本，因为目前还没有替换选项（https://angular.io/guide/deprecations）。但是我建议使用全局样式（通过 styles.scss）与 panelClass 选项相结合，而不是使用组件特定的样式。 - Mr.wiseguy

通过这样做，我被迫使用!important，而我不应该在那个应用程序中使用它TT.TT - An-droid

通过为其添加面板类，您可以为其提供更具体的样式，从而覆盖材料样式：.mat-snack-bar-container.warning {background-color: red}。 - Mr.wiseguy

Answer 4

在全局样式文件(.css)中添加::ng-deep后，每个属性都可以正常工作。如下所示：

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



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

- Adam reuben

Answer 5

您可以通过在app.module.ts中导入MAT_SNACK_BAR_DEFAULT_OPTIONS来实现全局设置：

app.module.ts

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

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

styles.css

.mycsssnackbartest {
  background-color: blue;
}

- umbe1987

Answer 6

补充答案：如果你使用的是CSS（而不是SASS）并且启用了ViewEncapsulation，效果如下：

 ::ng-deep .mat-mdc-snack-bar-container.blue-snackbar {
    --mdc-snackbar-container-color: #2196f3;
    --mat-mdc-snack-bar-button-color: #fff;
    --mdc-snackbar-supporting-text-color: #fff;
  }

- wemon

---

在我的情况下，没有使用 ::ng-deep 也能正常工作，但你必须将它放在全局样式中（styles.scss）。 - undefined

谢谢，但我更喜欢将样式与组件分开。 - undefined