html - 如何在 Angular Material 7 中使用 CSS 操纵 mat-snack-bar 模板的外观

Question

我看到的答案与我正在寻找的答案有点相似，但没有一个能最终解决我的具体问题。例如this answer向您展示如何更改 snackbar 的背景颜色并且它有效。如果您尝试操纵 snackbar 的宽度，那么问题似乎就是您可以在 css 中做的所有事情都没有发生。

我看到的另一个答案:Overriding Default Style of SnackBar Component但由于某种原因，它不起作用。

所以现在我的问题是:

如何使用 CSS 控制 mat-snack-bar 模板的外观？ (请告诉我如何:

1. 设置宽度:100%(全屏时)
2. 让 snackbar 出现在顶部

使用这个 example in stackbiz

谢谢。

Answer 1

要覆盖 mat 样式，您应该放置您的 css 类在 style.css 文件中，否则它什么都不做

另一种方法是改变ViewEncapsulation Mode

请看Diff between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated