Get rid of white space around Angular Material modal dialog

Question

I want to get rid of the white space in my Angular Material modal dialog. How do I style the css so I can't see any white? My css so far:

app-commission-me-dialog {
    margin: 0px;
    padding: 0px;
}

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}

Answer 1

Updated Answer

From the official documentation:

Styling overlay components

Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.

You can override the default dialog container styles by adding a css class in your global styles.css. For example:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

After that, you'll need to providies you css class as a panelClass parameter to your dialog:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

Link to StackBlitz Demo. Read this official documentation for more information.

---

Original Answer

Use ViewEncapsulation to override default styles with your styles.

In the component which opens the dialog, do the following changes:

import {ViewEncapsulation} from '@angular/core';
    
@Component({
  .....,
  encapsulation: ViewEncapsulation.None 
})

and in that component's css file, add the following class:

.mat-dialog-container {
    padding: 0px !important;
}

Here is a link to Plunker Demo.