2016-11-09 16 views
1

たとえば、反応起動ストラップで開発された反応Webアプリケーションがあります。このアプリケーションは、カラーピッカーでカスタマイズ可能でなければなりません。ユーザは基本カラーを選択し、いくつかの自動的に選択された二次色を有するカラースキームが、ウェブアプリケーションGUI全体にわたって採用される。反応を使用してウェブアプリケーションのカラースキームを変更するにはどうすればよいですか?

リアクションウェイは、個々のコンポーネントごとにインラインスタイルを使用することを覚えているので、私はリアクションブートストラップと反応させる方法を考えていますか?

答えて

2

React CSS Modulesを参照すると、動的スタイルのオブジェクトを使用できます。コードは簡単に読み取られ、正しく機能します。ただし、これには事前定義されたテーマが必要です。

2番目のアプローチでは、reduxストアまたは隣接コンポーネントで定義された色を使用して、すべての子にpropとして渡します。

ただし、カスタムカラーピッカーでユーザーが任意の色を選択することはできません。 RGBで色を選択させる場合は、16777216の色の組み合わせがあることを覚えておいてください。与えられた色を暗くすることによって、単に代替色を簡単に作ることはできません。明るさを下げると、2次色とのコントラストが低下することがあります。

1

アプリthemableを作りたい場合は、あなたが必要な場合があります:ツールのようなテーマをあなたのアプリ

にこのテーマを実装する

  • アプローチを作成する

    1. ツールあなたはこれを試してみてくださいstorybook-addon-material-ui(タイトルにMaterial-UIがあるにもかかわらず、すべての目的のテーマオブジェクトを作成できます)

      あなたのアプリをあなたのテーマに変えてください。あなたはreact-theme-providerを使うかもしれません。テーマデータをコンテキストを介してComponentsに渡すだけで、必要なときにフレームワークを実装したり、マニュアルで色を設定することができます。また、テーマを切り替えるためのAPIも備えています。

  • 関連する問題