How to remove the default matDialog background

July 15, 2022

After clicking a button, a MatDialog component is opened and contains some html and other angular material components.
I’m using mat-elevation-z5 class and the dialog looks like that :

I want to delete the background (the Matdialog effect) and keep only my form

this is my html :

<div class="form-container mat-elevation-z5" style="">
  <h1 mat-dialog-title>Add new user</h1>
  <div mat-dialog-content>
    <form [formGroup]="registerUserForm" (ngSubmit)="submit()">
      <mat-form-field>
        <input matInput placeholder="Full Name" formControlName="name" />
      </mat-form-field>
    </form>
  </div>
</div>

>Solution :

The solution that I will suggest for this issue is to use the panelClass property of the material dialog.
e.g.

    this.dialog.open(MyDialog, {
      panelClass: 'borderless-dialog',
    });

this will add the borderless-dialog CSS class to the wrapper of the dialog, after that you will need the following CSS in your global styles

.borderless-dialog .mat-dialog-container {
  padding: 0px;
  overflow: hidden;
}

this piece of CSS will target only the dialogs that are using the particular class (e.g. it won’t break the rest of your dialogs), after that the only thing left is to remove the default padding of the dialog container.

Edit:
You can also add the elevation styles in this selector, as otherwise the shadow will be cropped.