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

Posted 2023-02-23

【中文标题】如何在 Angular Material 7 中使用 CSS 操作 mat-snack-bar 模板的外观

【英文标题】：How do I manipulate the look of a mat-snack-bar template using CSS in Angular Material 7

【发布时间】：2019-05-22 23:04:25

【问题描述】：

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

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

所以现在我的问题是：

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

使宽度：100%（全屏时）和 让小吃吧出现在顶部

使用这个example in stackbiz

谢谢。

【参考方案1】：

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

另一种方法是改变 ViewEncapsulation Mode

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

【讨论】：

谢谢。我已经在这样做了，但是要操纵宽度，您必须完整地放置 css 属性，如接受的答案中所示。只有这样它才能起作用。

【参考方案2】：

你可以很简单地通过使用 CSS 来做到这一点。 您所要做的就是在定义类（例如 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;

这些线确保小吃吧位于顶部（因此“顶部：0”）并延伸到整个可用空间（“位置：绝对”允许这种放置游戏）

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

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

【讨论】：

谢谢。这行得通。早些时候，我只添加了宽度属性。我虽然打算在容器内使用它并使其宽度与容器的宽度相同。有了这个答案，我相信我会弄清楚的。