Issue
The only way that I succee to update .mat-dialog-container style is by adding ::ng-deep
::ng-deep .mat-dialog-container {
overflow: hidden
}
as I understand it is recommended to avoid using :ng-deep.
How I can update the style without it? Thanks
Solution
Material components makes a extensive use of cdk-over-lay. This makes that to change the .css we need use a global style (a cdk-over-lay create a div "outside of" application, press F12 to see, this is the reason no .css can "reach it"). So we need override the .css in styles.css (a ViewEncapsulation.None make the same effect)
If we want to override all the components of same type, we can e.g.
//in styles.css
.mat-dialog-container{
background-color:red;
}
But what happen if we only want to change the mat-dialog of a specific component? Well, all the material component (check the docs) usually has a property called panelClass
-in the case of dialog we indicate this property in the "config"-
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
panelClass: 'custom',
...
});
Now we can use specificity and create a class like
//also in styles.css
.custom .mat-dialog-container{
background-color:red;
}
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.