使用 ViewEncapsulation.None 打开不同的对话框时，Mat-Dialog 样式会发生变化
Mat-Dialog style changes when opening different dialogs using ViewEncapsulation.None
我的代码中有许多不同的 <mat-dialog> 元素。我想使用 ViewEncapsulation.None 这样我就可以将 angular material 给定的默认样式自定义为 <mat-tab> 和 <mat-dialog-container> 。当我第一次打开一个对话框时，样式是他们应该的，但是如果我打开一个不同的对话框，所有的样式开始相互结合。
我想了解为什么会这样，我有什么选择。 （我更愿意避免使用 ::ng-deep
通过使用 ViewEncapsulation.None，您将所有样式移动到顶层，因此它将开始应用于 DOM 中的所有元素。所以如果你想定制它有一些可用的选项
- 你可以传递 "panelClass" 和 "backdropClass" 的 Mat-dialog 选项。
使用此 classes 您可以自定义
- 你可以将common class添加到你想要自定义的所有对话框中，并在global style.css中编写样式。使用 common class 设置样式范围，这样它就不会与其他
重叠
我的代码中有许多不同的 <mat-dialog> 元素。我想使用 ViewEncapsulation.None 这样我就可以将 angular material 给定的默认样式自定义为 <mat-tab> 和 <mat-dialog-container> 。当我第一次打开一个对话框时，样式是他们应该的，但是如果我打开一个不同的对话框，所有的样式开始相互结合。
我想了解为什么会这样，我有什么选择。 （我更愿意避免使用 ::ng-deep
通过使用 ViewEncapsulation.None，您将所有样式移动到顶层，因此它将开始应用于 DOM 中的所有元素。所以如果你想定制它有一些可用的选项
- 你可以传递 "panelClass" 和 "backdropClass" 的 Mat-dialog 选项。 使用此 classes 您可以自定义
- 你可以将common class添加到你想要自定义的所有对话框中，并在global style.css中编写样式。使用 common class 设置样式范围，这样它就不会与其他 重叠