Angular Material: Theming Standard-Steuerelemente

Question

Ich habe meine benutzerdefinierte Lichtthema für meine Website (die ganz in der Nähe von Indigo-Pink ist) erstellt. Für einige der Bedienelemente möchte ich jedoch ein völlig anderes Aussehen verwenden: Nehmen wir an, für Drop-Down-Standard-Look ist weiß mit grauem Highlight, ich möchte ein weiß mit blauem Highlight. Ich habe einen Weg gefunden, durch das CSS zu überschreiben, aber ich frage mich, ob ich das über meine SCSS-Hauptdatei mit Mixins wie für benutzerdefinierte Steuerelemente tun kann.

Answer 1

Wenn Sie der Methode "Angular Material" folgen möchten, können Sie mehrere Designs (Farbpaletten) in Ihrer SCSS-Datei definieren und diese über das Attribut color="primary" oder color="yourCustomPallete" verwenden.

Answer 2

Importieren Sie einfach das Thema separat in den spezifischen mixin wie das, was die mixin angular-material-theme tut (die im Grunde das Thema für bestimmte Komponenten zu allen Themen umfassen):

@include mat-button-theme($my-theme); 
@include mat-card-theme($my-other-theme); 

Auszug aus _all-palette.scss:

@mixin angular-material-theme($theme) { 
    @include mat-core-theme($theme); 
    @include mat-autocomplete-theme($theme); 
    @include mat-button-theme($theme); 
    @include mat-button-toggle-theme($theme); 
    @include mat-card-theme($theme); 
    @include mat-checkbox-theme($theme); 
    @include mat-chips-theme($theme); 
    @include mat-table-theme($theme); 
    @include mat-datepicker-theme($theme); 
    @include mat-dialog-theme($theme); 
    @include mat-expansion-panel-theme($theme); 
    @include mat-form-field-theme($theme); 
    @include mat-grid-list-theme($theme); 
    @include mat-icon-theme($theme); 
    @include mat-input-theme($theme); 
    @include mat-list-theme($theme); 
    @include mat-menu-theme($theme); 
    @include mat-paginator-theme($theme); 
    @include mat-progress-bar-theme($theme); 
    @include mat-progress-spinner-theme($theme); 
    @include mat-radio-theme($theme); 
    @include mat-select-theme($theme); 
    @include mat-sidenav-theme($theme); 
    @include mat-slide-toggle-theme($theme); 
    @include mat-slider-theme($theme); 
    @include mat-stepper-theme($theme); 
    @include mat-tabs-theme($theme); 
    @include mat-toolbar-theme($theme); 
    @include mat-tooltip-theme($theme); 
    @include mat-snack-bar-theme($theme); 

}

• More info
• _all-palette.scss (where the mixin angular-material-theme source code is)