angular - 应如何使用 Angular 7 Material `panelClass` 属性？

Question

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

The API很简单。提供一个字符串 | string[] 我认为是类名。

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

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

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

但是看起来并没有那么简单。尤其是当我查看 ViewEncapsulation 时。 Snackbars 似乎是全局样式，我真的不知道不会违反作用域样式的技术。

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

As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

我还没有看到推荐的 depricated 功能，也不确定 future 会怎样。

Answer 1

使用叠加层的组件(如 snackbar 和对话框)的 DOM 不是“启动”叠加层组件的父组件的 DOM 的后代。因此，由于封装，即使使用深度选择器，尝试从父组件的 CSS/Sass 设置样式也是徒劳的。因此，该样式 - 使用 panelClass 选项指定的类 - 需要存在于全局样式表中。所以您的“天真猜测”是正确的 - 就这么简单。