Angular custom style to mat-dialog : <p>I am trying to customize the default "mat-dialog" in Angular 5. 
What I want to achieve is having a toolbar in the upper part of the dialog, which should cover the whole width. 
However, the mat-dialog-container has a fixed padding of 24px which I could not override. I tried to style both the h1 and the mat-dialog-container.</p>

<pre><code>@Component({
selector: 'error-dialog',
template: 
` &lt;h1 mat-dialog-title&gt; ERRORE &lt;/h1&gt;             
    &lt;div mat-dialog-content&gt;
        {{data.error}}
    &lt;/div&gt;
    &lt;div mat-dialog-actions&gt;
        &lt;button mat-button (click)="onClick()"&gt;Ok&lt;/button&gt; 
    &lt;/div&gt;`,
styles: [
'h1 { background: #E60000; color: white; }',
// 'myDialogStyle .mat-dialog-container { padding: 1px !important;}'
]})

export class ErrorDialog {
constructor(
public dialogRef: MatDialogRef&lt;ErrorDialog&gt;,
@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'
    });
}
</code></pre>
