Angular 7 Material `panelClass` 属性 应该如何使用？
How should Angular 7 Material `panelClass` property be used?
是一个非常相似的问题，只是涉及大量猜测，我正在努力使其在 Angular 7 中发挥作用。
The API 非常简单。提供一个 string | string[] 我认为是 class 的名字。
但是你在哪里定义这些样式以及涉及的语法是什么？有标准方法吗？
天真的猜测是将 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 功能，也不确定未来会怎样。
DOM 对于使用叠加层的组件（如小吃店和对话框），DOM 不是 'launches' 叠加层组件的父组件的 DOM 的后代。因此，由于封装，即使使用深度选择器，尝试从父组件的 CSS/Sass 设置样式也是徒劳的。因此，该样式 - 使用 panelClass 选项指定的 class - 需要存在于全局样式 sheet 中。所以你的 'naive guess' 是正确的 - 就这么简单。
DOM for Snackbar 不是被调用组件的子元素，因此由于这个原因，如果使用 class 选择器，则使用 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 样式（或者全局 - style.css 如果你想它在全球范围内。)
来源 - https://www.cloudhadoop.com/angular-material-snackbar-examples/
The API 非常简单。提供一个 string | string[] 我认为是 class 的名字。
但是你在哪里定义这些样式以及涉及的语法是什么？有标准方法吗？
天真的猜测是将 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 功能，也不确定未来会怎样。
DOM 对于使用叠加层的组件（如小吃店和对话框），DOM 不是 'launches' 叠加层组件的父组件的 DOM 的后代。因此，由于封装，即使使用深度选择器，尝试从父组件的 CSS/Sass 设置样式也是徒劳的。因此，该样式 - 使用 panelClass 选项指定的 class - 需要存在于全局样式 sheet 中。所以你的 'naive guess' 是正确的 - 就这么简单。
DOM for Snackbar 不是被调用组件的子元素，因此由于这个原因，如果使用 class 选择器，则使用 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 样式（或者全局 - style.css 如果你想它在全球范围内。)
来源 - https://www.cloudhadoop.com/angular-material-snackbar-examples/