【问题标题】：Mat-Dialog style changes when opening different dialogs using ViewEncapsulation.NoneMat-Dialog 样式在使用 ViewEncapsulation.None 打开不同的对话框时发生变化
【发布时间】：2020-01-15 23:58:39
【问题描述】：
我的代码中有许多不同的<mat-dialog> 元素。我想使用ViewEncapsulation.None，所以我可以自定义角度材料给定的默认样式<mat-tab>和<mat-dialog-container>。当我第一次打开一个对话框时，样式是应该的，但是如果我打开一个不同的对话框，所有的样式开始相互结合。
我想了解为什么会发生这种情况，以及我的选择是什么。 （我更喜欢避免使用::ng-deep
【问题讨论】：
标签：
angular
sass
angular-material
styles
encapsulation
【解决方案1】：
通过使用 ViewEncapsulation.None 您将所有样式移动到顶层，因此它将开始应用于 DOM 中的所有元素。因此，如果您想对其进行自定义，可以使用一些选项
- Mat-dialog 选项可以传递“panelClass”和“backdropClass”。
使用这些类，您可以自定义
- 您可以将通用类添加到您想要自定义的所有对话框中，并在全局 style.css 中编写样式。将您的样式设置为通用类的范围，使其不会与其他类重叠