How do I delete a white layer over dialog background in Angular?

Question

I am trying to do a transparent background for my MatDialog component. Here is the code:

parent.component.html

openDialog(){

  const dialogConfig = new MatDialogConfig();

  dialogConfig.width = '340px';
  dialogConfig.height = '476px';
  dialogConfig.panelClass = "dialogClass";

  this.dialog.open(ChildComponent, dialogConfig)
}

styles.css (global file, not the parent component one)

.dialogClass{
    background-color: pink;  //pink to see if it works
}

(changes background for this particular dialog)

OR

mat-dialog-container {
    background-color: pink;
}

(changes background for all dialogs)

This code works (I can see pink for a second every time I open the dialog), but it gets instantly covered with a white layer. All I have in my ChildComponent is displayed over this layer:

MatDialog background -> White layer -> ChildComponent

If ChildComponent .css and .html files are empty, it still appears. Setting a block with transparent background doesn't help either.

How do I delete this white layer from a dialog?

Answer 1

You need to set

.mdc-dialog__surface {
    background: transparent;
}

First example from https://material.angular.io/components/dialog/overview

Without background: transparent

With background: transparent

Is the second example desired solution?