Verwenden von eckigen Materialfarben in meinen eigenen Komponenten

Question

Wenn ich ein Element, das kein Material 2-Komponente ist, mit den im Thema definierten Farben stylen soll, wie sieht der Standard dafür aus?

Also sagen, ich habe eine h1 Tag in einer Komponente und ich möchte die Farbe zu meinem primary color. Ich möchte in der Lage sein, die Dinge zu tun, wie folgt aus:

h1{ 
    color: $color-primary; 
} 

Im Moment bin

theme.scss eine theme.scss und styles.scss haben:

@import '~@angular/material/theming'; 
@include mat-core(); 
$color-primary: mat-palette($mat-blue); 
$color-accent: mat-palette($mat-amber, A400, A200, A500); 
$color-warn: mat-palette($mat-red); 
$theme: mat-light-theme($color-primary, $color-accent, $color-warn); 
@include angular-material-theme($theme); 

I könnte theme.scss in meinem component.scss importieren, aber sie state not to do so:

Importiert den Mat-Core() Sass Mixin. Dies umfasst alle gängigen Stile , die von mehreren Komponenten verwendet werden. Dies sollte nur einmal in Ihrer Anwendung enthalten sein. Wenn diese Mischung mehrmals enthalten ist, wird Ihre Anwendung mit mehreren Kopien dieser gängigen Stile enden.

Answer 1

Ich denke, dass dies gelöst werden kann, indem Sie Ihr benutzerdefiniertes Thema in mehrere Dateien aufteilen. Zum Beispiel habe ich eine _mat-colors.scss und _mat-theme.scss. _mat-colors enthält die drei benötigten Farbvariablen; _mat-theme verwendet _mat-colors und ist, wo ich meine Paletten definieren und Mat-Core einschließen. Sie könnten dann eine _variables oder _colors Datei haben und es verwenden, wie so:

@import '@angular/material/theming'; 
@import './mat-colors'; 

$color-red: mat-color($my-warn-palette); 

Sie dann $color-red oder andere verwenden könnte, dass Sie je nach Bedarf definieren.