PanelClass for MatDialogConfig is being added to the wrong element. How can I resolve this?

Question

I am trying to remove the padding around mat-dialog-container by adding a custom class to the dialog like so.

Custom class

.custom-dialog-container {
   padding: 0px;
}

Opening the dialog

myFunction(data) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = {
      data: data
    }
    dialogConfig.disableClose = false;
    dialogConfig.width = "auto";
    dialogConfig.height = "auto";
    dialogConfig.panelClass = "custom-dialog-container";
    let dialogRef = this.matDialog.open(DialogComponent, dialogConfig);
  }

However, when inspecting the html custom-dialog-container is not being added to mat-dialog-container, but to the parent div instead

<div id="cdk-overlay-0" class="cdk-overlay-pane custom-dialog-container"
    style="max-width: 80vw; pointer-events: auto; width: auto; height: auto; position: 
    static;">
</div>
    <mat-dialog-container aria-modal="true"
        class="mat-dialog-container ng-tns-c6-3 ng-trigger ng-trigger-dialogContainer 
        ng-star-inserted" tabindex="-1"
        id="mat-dialog-0" role="dialog" style="transform: none;">

How can I resolve this issue? Is there another method to remove padding on mat-dialog-container?