如何在Angular Material 7中使用CSS来操纵垫子小吃店模板的外观

Question

我看到的答案与我正在寻找的答案有些相似，但没有一个结论性地解决了我的特定问题。例如this answer向您展示了如何更改小吃店的背景颜色，它的工作原理。如果您尝试操纵小吃店的宽度，那么似乎就是CSS所能解决的所有问题。

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

所以我的问题是：

如何使用CSS来操纵餐垫吧模板的外观？ （请教我如何操作

1. 设置宽度：100％（当屏幕为全尺寸时），
2. 使小吃店出现在顶部

使用此example in stackbiz

谢谢。

Answer 1

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

另一种方法是更改​​ViewEncapsulation模式

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

Answer 2

您可以使用CSS非常简单地做到这一点。 您要做的只是添加到CSS文件中，在其中定义以下类（例如blue-snackbar）：

.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”）并延伸到整个可用空间（“ position：absolute”允许放置此游戏）

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

最大宽度允许div占用页面的整个宽度，而width指示宽度。 “！important”指令用于绕过其他样式的所有冲突CSS。