Wie die Hintergrundfarbe eines div als primäres Thema Farbe in Angular 2 Material

Question

ich ein Thema der von dem Winkel 2 Materials bin mit ein. Ich bin in der Lage, die Themenfarben auf Materialkomponenten wie Schaltfläche, Symbolleiste mit Farbe = "primär" zu verwenden. Aber ich bin nicht in der Lage, herauszufinden, wie man ein Div. Ich möchte den Hash in der CSS-Datei nicht fest codieren, da ich Änderungen an allen Stellen benötige, wenn ich mich dazu entscheide, das Thema zu ändern. Fehle ich etwas? Was ist der beste Weg, dies zu tun?

Answer 1

der Tat kann man nicht color="primary" auf jedem HTML-Element verwenden.

Was ich ist habe eine Klasse color-primary

@import '~@angular/material/theming'; 
@include mat-core(); 

$primary: mat-palette($mat-deep-purple, 600, 500, 900); 
$accent: mat-palette($mat-amber, A400, A300, A600); 


.color-primary { 
    color: mat-color($primary); 
} 

.color-accent { 
    color: mat-color($accent); 
} 

Natürlich genannt, ich habe die Farbe hier eingestellt, aber Sie können eine andere Klasse, zum Beispiel erstellen: background-color-primary.

(hier ist der Link meines Beispielprojekts: Pizza-Sync).

Answer 2

Der beste Weg ist, um die definierte Paletten für Hintergrund und Vordergrund zu verwenden. Um Eigenschaften hinzuzufügen, wenn Sie wünschen.

See my answer to this post