Mat-Dialog style changes when opening different dialogs using ViewEncapsulation.None

Question

I have many different <mat-dialog> elements in my code. I wanted to use ViewEncapsulation.None so I could customize the defaults styles given by angular material to <mat-tab> and <mat-dialog-container> . When i first open a dialog, the styles are as they should be, but if I open a different dialog, all the styles of the begin to combine with each other.

I would like to understand why is this happening, and what are my options. (i prefer to avoid using ::ng-deep

Answer 1

By using ViewEncapsulation.None you are moving all the styles to top level so it will start apply to all elements in the DOM. So if you want customize it there some options available

• Mat-dialog options you can pass "panelClass" and "backdropClass". Using this classes you can customize
• You can add common class to all the dialog you want to customize and write the style in global style.css . Scope you style with common class so it will not overlap with other