Material 2 dialog change style

Question

I'm trying to change the style of the md-dialog.

in my main.scss i'm importing the prebuild pink-bluegrey theme... then in my component I import the following -->

@import "@angular/material/dialog/dialog.scss";

$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;

@mixin mat-dialog-container {
    padding: $mat-dialog-padding;
    border-radius: $mat-dialog-border-radius;
    background: $background;
}

@include mat-dialog-container;

The padding and border radius is correctly applied to the dialog window. But the background is not working... also tried the !important statement.

I'm using this in a single component... Is there also a change to apply those styles globally?

in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..

hope anyone can help.

thanks

Answer 1

It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.

When you open your Angular dialog, you can add a panelClass attribute, like this:

this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).

then, in your css (e.g. in the root styles.css file), you can add the following:

.my-panel .mat-dialog-container {
    overflow: hidden;
    border-radius: 5px;
    padding: 5px;
}

EDIT Warning

It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular

EDIT2 Good alternative

If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a @mixin, and @import the file in styles.scss. You can then use @include to load the defined mixin.

in your mydialog.component.scss file

@mixin myPanel(){
 .my-panel .mat-dialog-container {
   // css here
 }
}

in your styles.scss

@import 'path/to/mydialog.component.scss' // you don't need the .scss suffix

@include myPanel();