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

This should work ; write this code inside style.scss (global scss file).This will make the dialog background transparent.

.DialogClass .mat-dialog-container {
  background-color: transparent !important;
  box-shadow: none !important;
}