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?
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?