Angular Material disables style encapsulation for all components in the library. However, the default style encapsulation in your own components still prevents custom styles from leaking into Angular Material components.

1. Define custom styles in a global stylesheet declared in the styles array of your angular.json configuration file.
2. Disable view encapsulation for your component. This approach effectively turns your component styles into global CSS.
3. Apply the deprecated ::ng-deep pseudo-class to a CSS rule. Any CSS rule with ::ng-deep becomes a global style. See the Angular documentation for more on ::ng-deep.

To apply custom css on any angular material components you need to define you css as global css not component based css

Overlay-based components have a panelClass property, or similar, that let you target the overlay pane.

Define you css class in global style css

.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' })

If you do not want to define your css in global style css then you can do one of the following

1. use encapsulation: ViewEncapsulation.None in your-dialogue-component.ts

@Component({
 ...
....
  // this needed to override the mat-dialog-container CSS class
  encapsulation: ViewEncapsulation.None
})

1. Or you could write css in your componet css file like this

::ng-deep .my-custom-dialog-class {
  mat-dialog-container {
    //add your css
  }
}

OR without any panelClass. But this will affect all dialog

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

Change width/height

You can change width/height of the modal by setting the values in the open() method, something like the following:

this.dialog.open(MyDialogComponent, {
  height: '300px'
  width: '400px'
});