ReactとReduxのWebアプリケーションで2つのテーマを切り替えるオプションを実装したいと思います。ReactとReduxでWebアプリケーションのテーマを切り替える最も良い方法は何ですか？
私はテーマごとに1つずつ、2種類のCSSファイルを用意しています。今、CSSファイルのスタイルを適用するために、私は単にApp.jsの頭にそれをインポートします。
私は、アプリケーションの状態（ 'theme1'または 'theme2'）に従ってスタイリングをインポートします。
私はいくつかの面倒な方法を考えることができ、それのためのいくつかの既製のパッケージを見つけましたが、それをできるだけ効率的かつきれいにする従来の方法があるかどうかを知りたいと思います。
これは作成反応アプリケーションキットです。
ありがとうございます。
scss/sassを使ってみてください - クラス/要素をネストすることができるので、プロセス全体を簡素化できると思います。
例えば、テーマ2テーマ1と、あなたは2つの状態の間の切り替えを前提とすることができます：
<div className={this.state.theme}>
<h2>Some text</h2>
</div>
そして、あなたの.scssファイルがあなたのtaskrunnerの設定があるかに応じて、
.theme1{
background-color: black;
h2 {
color: white;
}
}
.theme2{
background-color: white;
h2{
color: black;
}
}
一つの可能性のようになります。あなたのテーマに応じて<head>のCSSリファレンスを変更することを可能にするReact-Helmetを導入することになります。
import React from "react";
import {Helmet} from "react-helmet";
function StyleSwitch (props) {
return (
<Helmet>
<link rel="stylesheet" href={props.stylesheet} />
</Helmet>
);
};
私のcreate-react-appで動作しません。 – Amiry
この質問は、広すぎる、意見に基づく、またはディスカッションが必要なので、スタックオーバーフローのトピックではありません。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –
@Paulie_D私は自分の質問を編集しました。まだ問題がある場合は教えてください。 – Amiry
あなたのコードをここに転記する際に、1行目のミスマッチな一重引用符が誤植ですか？それがあなたの問題の一部である場合には、私はそれを "修正"したくありません。 （これが構文の強調表示がとても有用な理由です） –