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

Question

我看到的答案与我正在寻找的有点相似，但其中 none 最终解决了我的具体问题。例如向您展示了如何更改小吃店的背景颜色并且它有效。如果您尝试操纵小吃店的宽度，那么问题似乎就是您在 css 中所能做的所有事情。

我看到的另一个答案：但由于某些原因它不起作用。

所以现在我的问题是：

如何使用 CSS 操纵 mat-snack-bar 模板的外观？（请告诉我如何：

谢谢。

Answer 1

您可以使用 CSS 非常简单地做到这一点。您所要做的就是将以下内容添加到定义 class（例如 blue-snackbar）的 CSS 文件中：

.blue-snackbar {
  background: #2196F3;
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  max-width: 100% !important;
  width: 100%;
}

我将复习一下它的作用：

  position: absolute; 
  top: 0;
  left: 0;
  right: 0;

这些行确保小吃店在顶部（因此 "top: 0"）并延伸到整个可用空间 space（"position: absolute" 允许这种放置游戏）

  max-width: 100% !important;
  width: 100%;

最大宽度允许 div 占据页面的整个宽度，并且 width 指示它这样做。 "!important" 指令用于绕过来自其他样式的任何冲突 CSS。

Answer 2

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

另一种方法是更改 ViewEncapsulation 模式

请看

How do I manipulate the look of a mat-snack-bar template using CSS in Angular Material 7