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

Question

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

API非常简单。提供一个string | string[]我认为是类名的名称。

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

一个天真的猜测是panelClass: ['my-class']然后放入styles.css

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

但事情似乎并没有那么简单。尤其是当我看着ViewEncapsulation. 快捷栏似乎是全局样式，我真的不知道不会违反作用域样式的技术。

ng-deep即将离开我们，但他们提到：

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

我还没有看到任何被推荐的功能，也不确定未来会怎样。

Answer 1

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