問題タブ [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.
styled-components - @font-face で分離された styled-components
私はhttps://github.com/styled-components/styled-componentsを使用しています。
を必要とするコンポーネントの最適な戦略を考え出そうとしています@font-face。各コンポーネントがそのコンテキストから独立していることを確認したいので、font-familyそれぞれにスタイルを定義しています。しかしinjectGlobal、複数のコンポーネントで使用する@font-faceと、同じフォントに対して複数のルールが取得されます。
エントリポイント コンポーネントで@font-faceルールを定義するだけで、目的のフォントがブラウザによって読み込まれない可能性があるという事実を受け入れる必要がありますか?ThemeProvider
reactjs - styled-components: FOUC が心配
私はstyled-componentsパッケージを使用してきましたが、開発者にとって使いやすさは素晴らしいと思います!
ただし、気になる点が 1 つあります。Flash Of Unstyled Contentです。
本番環境でも開発環境でも、スタイルは javascript チャンクでパッケージ化されます。コンポーネントが読み込まれると、スタイルが生成され、<head>.
これは本質的に、CSS モジュールの動作と同じです。
私は、survivalJSの投稿を参照して、ExtractTextPluginを使用して、製品のビルド段階で個別のスタイルシート (css ファイル) を作成する方法を学びました。
ただし、styled-componentsCSS は単なる JS であるため、その手法を使用することはできません (少なくとも、私はそれを機能させることができませんでした)。
スタイル付きコンポーネントを使用して次のプロジェクトの構築を開始する前に、誰かが私の心配を取り除いてくれませんか?
css - スタイル付きコンポーネント編成
アプリで styled-components を使用したいのですが、どのように整理すればよいか悩んでいます。
基本的にスタイル付きコンポーネントは、再利用のために特定のコンポーネントに割り当てられます。
しかし、他のコンポーネント (アニメーション コンポーネントなど) で何度も使用したい styled-components はどうですか? これらの「グローバル」スタイル コンポーネントを保持し、それを多くのコンポーネントにインポートするファイルを作成する必要がありますか?
それは良い習慣ですか？