Change background color of Angular dialog-CodePudding

I'm trying to change the Dialog background without touching the style.css file.

As some other answers tell, there are many ways to set the Dialog style:

1- This solution works for width and height but the transparent background is "ignored".

this.dialog.open(DialogComponent, {
      disableClose: true,
      width: "100%",
      height: "100%",
      panelClass: "myClass",
    });


.myClass{
  background-color: transparent !important;
  max-width: none !important;
}

2- You can also use ::ng-deep like this:
In this case the background color gets set to transparent but all the Dialogs aquire this property and I don't want that to happen

::ng-deep mat-dialog-container {
  background-color: transparent !important;
}

For what I saw the panelClass: "myClass" option overrides this class cdk-overlay-pane Meanwhile what I need to override is mat-dialog-container without compromising other dialogs.

Is there a way to do that without compromising the other Dialogs?

CodePudding user response：

Use host in your component style-sheet, with that, you only modify the styles for that particular component:

:host ::ng-deep mat-dialog-container {
  background-color: transparent !important;
}

CodePudding user response：

Try to use ::ng-deep but this way, for example

::ng-deep {
  .mat-dialog-container{
    box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
    background: #7e2727;
    color: rgba(0, 0, 0, 0.87);
  }
 }

CodePudding user response：

I will add my solution to help the others
but I'll wait for better ones because I don't really like my solution

So what I did is just add a different

::ng-deep mat-dialog-container {
  background-color: white !important;
}

for every .css file of the other Dialogs in my project.
This way the Dialog will overwrite the other styles with its own style.
Still looks like a bad solution to me but it works, looking forward to more answers.