eckig 4 ​​material wechselnde css im laufe der zeit

Question

ionic 3 hat ein sehr schönes konzept, die gesamte scss on the fly zu schalten. Ich habe bemerkt, dass eckiges Material in Richtung des Themas geht. Allerdings möchte ich nicht meine Komponenten, sondern bestimmte Elemente auf meiner Webseite stylen.

Also, alles, was ich brauche, ist eine Möglichkeit, dynamisch eine andere CSS anwenden zu können. ohne in der Lage zu sein, dynamisch anzuwenden, müsste ich zu viele ngIf oder ngClass in der gesamten Web-App schreiben. Was sicherlich hässlich ist.

So gibt es eine ionische 3 ähnliche Lösung wie https://competenepal.com/ionic-app-changing-themes-at-runtime/

Answer 1

Es ist wie das klingt kann sein, was Sie suchen

Um Ihre eigenen Komponenten mit kantigem Material des Werkzeug, um Stil, der die Arten Komponente muss mit Sass definiert werden.

Mit @mixin, um automatisch ein Thema anwenden

Warum

mit @mixin Der Vorteil einer @mixin Funktion besteht darin, dass, wenn Sie Ihr Design ändern, jede Datei, die es automatisch wird verwendet aktualisiert. Wenn Sie @mixin mit einem anderen Theme-Argument aufrufen, können mehrere Designs innerhalb der App oder Komponente angezeigt werden.

So verwenden @mixin

// Import all the tools needed to customize the theme and extract parts of it 
@import '~@angular/material/theming'; 

// Define a mixin that accepts a theme and outputs the color styles for the component. 
@mixin candy-carousel-theme($theme) { 
    // Extract whichever individual palettes you need from the theme. 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 

    // Use mat-color to extract individual colors from a palette as necessary. 
    .candy-carousel { 
    background-color: mat-color($primary); 
    border-color: mat-color($accent, A400); 
    } 
} 

// Import a pre-built theme 
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 
// Import your custom input theme file so you can call the custom-input-theme function 
@import 'app/candy-carousel/candy-carousel-theme.scss'; 

// Using the $theme variable from the pre-built theme you can call the theming function 
@include candy-carousel-theme($theme); 

https://material.angular.io/guide/theming-your-components