問題タブ [styled-components]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - styled-components を使用して構成されたコンポーネントをテーマ化するための推奨される方法は何ですか?
styled-componentテーマを設定する必要がある sを作成するための最良の方法を推奨できる人はいますか?
ここに私のコードがあります: https://gist.github.com/aaronmcadam/7bfd63a6bc4cfc36f9947a449c6f494a。
コンポーネントをAvatar構成するImageコンポーネントがあり、それ自体がstyled-component.
で使用するAvatar.styled.jsと<ThemeProvider>、テーマを正常にオーバーライドできます。
を使用する場合Avatar.withTheme.js、テーマは使用する場合にのみオーバーライドできますwithTheme。
このようなことを行うための好ましい方法はどれですか?
css - ReactJS styled-components のコンテキスト スタイル
スタイル付きコンポーネントで問題が発生しています。これが技術的な制限なのか、それとも使用方法に関する私のメンタル モデルが間違っているのかわかりません。
この例 (Codepen で簡単に書いたので、スペルミスは無視してください) には、スパン内のユーザー名であるコンポーネントがあります。そのコンポーネントをどこでも使用できるようにしたいので、スタイリングは最小限に抑えています。
このスパンを別のコンポーネントで使用できるようにしたいのですが、その場合は、このコンテキストでスタイリングをオーバーライドしたいと考えています。
私が知っていることから、それはサードパーティのコンポーネントにスタイリングを設定する方法です (そして、それは私のアプリケーションの他の場所で機能します)。
また、メンタル モデルの質問に戻りますが、これは、スタイル コンポーネントを使用している場合に行うべき方法ですか?
助けてくれてありがとう！
javascript - styled-components で Javascript 変数を使用する
スタイル付きコンポーネントを使用してコンポーネントを構築しています。カスタム値を受け入れるすべてのスタイル プロパティは、コンポーネント全体で再利用されます (そうあるべきです)。それを念頭に置いて、各スタイルを個別に更新する必要なく、更新がすべてのコンポーネントに伝播されるように、ある種のグローバル変数を使用したいと思います。
このようなもの：
私は構文が間違っていると思いますか？また、Javascript の世界ではグローバル変数が推奨されないことはわかっていますが、デザインの世界では、コンポーネント間でスタイルを再利用することが絶対に必要です。ここでのトレードオフは何ですか？