title: Angular custom style to mat-dialog
body: <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>