CODEWITHSUNDEEP
cssangulardialog
Synapsis
Synapsis

Reputation: 1017

Change background color of Angular dialog

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?

Upvotes: 5

Views: 6835

Answers (2)

Andres2142
Andres2142

Reputation: 2907

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;
}

UPDATE

So in order to customize the material dialog, you will need to create a custom css class, and set that class within your style.scss file:

style.scss

.custom-modalbox > mat-dialog-container {
  background-color: transparent !important;
}

And where you have the MatDialog injected, use that css class for the panelClass property:

YourComponent.ts

onOpenDialig() {
  this.dialog.open(DialogComponent, {
    disableClose: true,
    width: "100%",
    height: "100%",
    panelClass: 'custom-modalbox', // if you don't set this
                                   // that css class won't applied
  });
}

So with that, other components can use the dialog safely without affecting the look & feel if they don't use custom-modalbox

Upvotes: 5

Henry Xiloj Herrera
Henry Xiloj Herrera

Reputation: 304

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);
  }
 }

Upvotes: 1

Related Questions