Question

Angular 5 Material Snackbar panelClass config是一个非常相似的问题，只是涉及大量猜测，而我正努力使其在Angular 7中都能正常工作。

The API非常简单。提供一个string | string[]，我想是类名。

但是您在哪里定义这些样式，涉及的语法是什么？有没有标准的方法？

天真的猜测是将panelClass: ['my-class']放在styles.css

.my-class{
   text-align: center;
}

但是它似乎并不那么简单。特别是当我看着ViewEncapsulation时。小吃店似乎是全局样式，我真的不知道不会违反范围样式的技术。

ng-deep正在离开我们，但他们提到：

因此，我们计划放弃对Angular的支持（对于/ deep /的所有3个，>>> 和:: ng-deep）。在此之前，:: ng-deep应该是更广泛的首选与工具的兼容性。

我还没有看到推荐使用过分的功能，并且不确定将来会怎样。

Answer 1

使用诸如小吃店和对话框之类的覆盖的组件的DOM并不是“启动”覆盖组件的父组件的DOM的后代。因此，由于封装的原因，即使使用较深的选择器，尝试从父组件的CSS / Sass对其进行样式设置也是徒劳的。因此，该样式（使用panelClass选项指定的类）需要存在于全局样式表中。因此，您的“天真猜测”是正确的-就这么简单。

Answer 2

Snackbar的DOM不是所调用组件的子元素，因此，由于这个原因，如果使用了类选择器，则使用ng-deep。

      this._snackBar.open('Hello World', 'Close', {
        duration: 30000,
        panelClass: [custom-style],
      });

component.css

::ng-deep .custom-style{  background-color:brown;  color:white;}

在这种方法中，您甚至可以传递不同的字符串来更改Snackbar的样式。通过替换 custom-style （自定义样式）并在组件的相关CSS文件中实现不同的css样式（或如果要使其全局，则在global-style.css中实现）

来源-https://www.cloudhadoop.com/angular-material-snackbar-examples/

应该如何使用Angular 7材质的“ panelClass”属性？

2 个答案: