Wie wechselst du am besten mit React & Redux zwischen den Themen der Web-App?

Question

Ich möchte eine Option implementieren, um zwischen zwei Themen in meiner React und Redux Web App zu wechseln.

Ich habe 2 verschiedene CSS-Dateien, eine für jedes Thema. Gerade jetzt, um die Stylings einer CSS-Datei zu übernehmen, importiere ich sie einfach an der Spitze meiner App.js.

import '../styles/theme1.css'; 

const App = (props) => { 
    return (
     <div> 
     <Header /> 
     <Container/> 
     </div> 
    ); 
}; 

const mapStateToProps = (state) => ({ 
    theme: state.settings.theme // can return 'theme1'/'theme2' 
}); 

export default withRouter(connect(mapStateToProps)(App)); 

Deshalb möchte ich Stylings importieren nach dem Stand der App ('theme1' oder 'theme2').
Ich könnte mir ein paar unordentliche Wege vorstellen und einige vorgefertigte Pakete dafür finden, aber ich möchte wissen, ob es einen konventionellen Weg gibt, effizient und so sauber wie möglich zu arbeiten.

dies ist ein create-react-app kit.

Vielen Dank.

Answer 1

Versuchen Sie mit scss/sass - ich denke, es könnte den gesamten Prozess vereinfachen, weil es Ihnen ermöglicht, Klassen/Elemente verschachteln.

Zum Beispiel lässt annehmen, dass Sie zwischen zwei Zuständen umschalten, theme1 und theme2:

<div className={this.state.theme}> 
    <h2>Some text</h2> 
</div> 

Und Ihre .scss Datei wie

.theme1{ 
    background-color: black; 

    h2 { 
     color: white; 
    } 
} 

.theme2{ 
    background-color: white; 

    h2{ 
    color: black; 
    } 
} 

Answer 2

Eine Möglichkeit aussehen sollte, je nachdem wie Sie Ihre Taskrunner-Konfiguration eingerichtet wäre die Einführung React-Helmet, die Ihnen erlauben würde, die CSS-Referenz in Ihrem je nach Thema zu ändern.

import React from "react"; 
import {Helmet} from "react-helmet"; 

function StyleSwitch (props) { 
    return (
    <Helmet> 
     <link rel="stylesheet" href={props.stylesheet} /> 
    </Helmet> 
); 
};