Material 2 Dialog ändern Stil

Question

Ich versuche, den Stil des MD-Dialogs zu ändern.

in meinem main.scss ich bin den Import der vorkompilierte pink-Blaugrau Thema ... dann in meiner Komponente importieren ich folgendes ->

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

Die Polsterung und Umrandungsradius wird korrekt auf das Dialogfenster angewendet. Aber der Hintergrund funktioniert nicht ... auch versucht die! Wichtige Aussage.

Ich verwende dies in einer einzigen Komponente ... Gibt es auch eine Änderung, um diese Stile global anzuwenden?

in Chrome-Dev-Tools sehe ich diese angewandten Stiländerungen. Der Hintergrund wird durch das pink-blaugraue Thema überschrieben.

hoffe jeder kann helfen.

dank

Answer 1

löste ich dieses Problem, indem diesen CSS-Block in dem Ende der Datei einschließlich material2-app-theme.scss

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