Reagieren Komponententhema mit Sass Variablen abhängig von React Prop Wert

Question

Ich kann keine bessere Lösung für Theming finden. Ich habe eine Sass-Datei mit Variablen:

vars.scss:

$colors: (
    dark: (
     theme1: #0096dc, 
     theme2: #eb8200, 
     … 
    ), 
    … 
); 

Vorerst gehe ich theme prop zu allen Komponenten, die einige Styling je nachdem, welche Seite Benutzer haben sollte gerade überprüft. In Reaktion bauen I Klassennamen wie folgt aus:

<div className={styles[`button${theme ? `-${theme}` : ``}`]}>{children}</div> 

und in sass ich tun:

@import 'vars'; 

.button{ 
    /* basic styles */ 
    font-size: 14px; 
    border: 1px solid; 

    @each $theme, $color in map-get($colors, dark) { 
     &-#{$theme} { 
      @extend .button; 
      border-color: $color; 
      color: $color; 
     } 
    } 
} 

Aber das ist absolut unpraktisch, weil ich jedes Mal einen solchen Code platzieren muss ich Stilelement benötigen je nach Thema.

Es gibt Lösungen, wie man verschiedene Dateien mit Variablen für die Thematisierung im Webpack lädt, aber ich erhalte Requisite von redux, also hat webpack keinen Zugriff auf diese Requisite.

Ebenso kann ich keine Lösung finden, um die Eigenschaft von der Reaktionskomponente auf Sass zu übergeben. Nur gegenüber.

Keine Möglichkeit, Variablen bei Importen in Sass zu verwenden. Immer noch nicht implementiert.

Leider kann CSS-in-JS-Ansatz im aktuellen Projekt nicht verwendet werden.

Bitte helfen Sie besser Ansatz zu finden.

Answer 1

Ich würde es zu einer zustandslosen funktionalen Komponente machen.

function BrightBox(props){ 
    <div className={styles[`button${theme ? `-${theme}` : ``}`]}> 
    {props.children} 
    </div> 
} 

Dann importieren Sie es und verwenden Sie es. Es besteht keine Notwendigkeit, das Thema herumzugeben.

{user.notice ? 
    <BrightBox> 
    there are {user.notice.issues.size} outstanding issues! 
    </BrightBox> 
: null 
}