Angular custom style to mat-dialog
This will definitely work:
::ng-deep.mat-dialog-container {
padding: 0px !important;
}
You should use panelClass on the component at the same time as ::ng-deep on the css.
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
panelClass: 'custom-modalbox'
});
}
in css:
::ng-deep .custom-modalbox {
mat-dialog-container {
padding: 0;
}
}
I just change this, it works perfectly:
.custom-modalbox > mat-dialog-container {
padding: 0px;
}
Here there is a working example: https://stackblitz.com/edit/custom-dialog?file=src/styles.css
You can pass a custom panelClass in your matDialogConfig Object (doc here)
so
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
panelClass: 'custom-modalbox'
});
}
And in your custom panelClass you can override the padding :
.custom-modalbox {
mat-dialog-container {
padding: 0;
}
}
But your .custom-modalbox should be global scoped to be applied (not defined in the component styles )