Angular Material überschreiben Standard-Stil der SnackBar Komponente

Question

Ich versuche, die Standard-Max-Breite der Komponente snackbar in Angular Material zu überschreiben.

Die CSS durch scharfkantiges Material aufgebracht werden unten dargestellt:

.mat-snack-bar-container { 
    border-radius: 2px; 
    box-sizing: border-box; 
    display: block; 
    margin: 24px; 
    max-width: 568px; 
    min-width: 288px; 
    padding: 14px 24px; 
    transform: translateY(100%) translateY(24px); 
} 

Ich habe überschreiben versucht, den gleichen Stil in meiner style.css-Datei verwenden, aber dieser Stil wird durch den Standardstil außer Kraft gesetzt.

.mat-snack-bar-container { 
    max-width: 800px; 
} 

Ich habe eine Antwort auf eine similar question gefunden, aber ich weiß, dass die Antwort auf diese Frage ist jetzt veraltet ist (/ deep/ist veraltet).

Gibt es eine Best-Practice-Lösung?

Answer 1

dies richtig machen, können Sie die Ansicht Encapsulation auf None auf Ihrer Komponente festlegen müssen:

@Component({ 
    templateUrl: './my.component.html' , 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None, 
}) 

Dann in Ihrer Komponente CSS können Sie dies nur tun:

.mat-snack-bar-container { 
    max-width: 800px; 
} 

Von der offiziellen docs:

Ansicht Encapsulation = None bedeutet, dass Angular keine Kapselung zeigt. Angular fügt das CSS den globalen Stilen hinzu. Die zuvor beschriebenen Regeln, Isolierungen und Schutzmaßnahmen gelten nicht. Diese ist im Wesentlichen das gleiche wie Einfügen der Stile der Komponente in HTML.