Estoy tratando de personalizar el "cuadro de diálogo mat" predeterminado en Angular 5. Lo que quiero lograr es tener una barra de herramientas en la parte superior del cuadro de diálogo, que debe cubrir todo el ancho. Sin embargo, el mat-dialog-container tiene un relleno fijo de 24px que no pude anular. Traté de diseñar tanto el h1 como el mat-dialog-container.
@Component({ selector: 'error-dialog', template: ` <h1 mat-dialog-title> ERRORE </h1> <div mat-dialog-content> {{data.error}} </div> <div mat-dialog-actions> <button mat-button (click)="onClick()">Ok</button> </div>`, styles: [ 'h1 { background: #E60000; color: white; }', // 'myDialogStyle .mat-dialog-container { padding: 1px !important;}' ]}) export class ErrorDialog { constructor( public dialogRef: MatDialogRef<ErrorDialog>, @Inject(MAT_DIALOG_DATA) public data: any) { } onClick(): void { this.dialogRef.close(); } } openErrorDialog(errore: string): void{ let dialogRef = this.dialog.open(ErrorDialog, { width: '80%', data: { error: errore } //panelClass: 'myDialogStyle' }); }Puede pasar una clase de panel personalizada en su objeto matDialogConfig ( documento aquí )
asi que
openErrorDialog(errore: string): void{ let dialogRef = this.dialog.open(ErrorDialog, { width: '80%', data: { error: errore } panelClass: 'custom-modalbox' }); }Y en su panelClass personalizado puede anular el relleno:
.custom-modalbox { mat-dialog-container { padding: 0; } }Pero su .custom-modalbox debe tener un alcance global para ser aplicado (no definido en los estilos de componentes)
Esto definitivamente funcionará:
::ng-deep.mat-dialog-container { padding: 0px !important; }Debe usar panelClass en el componente al mismo tiempo que ::ng-deep en el css.
openErrorDialog(errore: string): void{ let dialogRef = this.dialog.open(ErrorDialog, { width: '80%', data: { error: errore } panelClass: 'custom-modalbox' }); }en CSS:
::ng-deep .custom-modalbox { mat-dialog-container { padding: 0; } }