web-dev-qa-db-ja.com

ReactjsでCSSモジュールよりもスタイル付きコンポーネントを使用する利点は何ですか

React=アプリケーション。

私の現在のプロジェクトでは、CSSモジュールを使用しています（主にCSSの競合とページ固有のCSSを取り除くため）。スタイル付けされたコンポーネントとCSS-in-JSを使用する必要がある理由について私は多くのことをグーグルで調べましたが、具体的な答えを得ることができませんでした。したがって、私の質問は、CSS-in-JSまたはスタイル付きコンポーネントを使用することで実際のパフォーマンス上の利点があるか、それとも単なる構文上の砂糖かということです。

javascriptcssreactjsstyled-components
12
Bharat Soni

私は両方の技術の経験があり、Radium（JSライブラリの別のCSS）を使用しており、現在私のプロジェクトでCSSモジュールを使用しています。スタイル付きコンポーネントは、：hover状態などのスタイルを設定できるため、Radiumよりも間違いなく優れています。しかし、私の意見では、特にプロジェクトが10〜50個のコンポーネントよりも大きくなる場合は、CSSモジュールが最適です。 JSライブラリーのCSSを介したコード共有は悪夢です。一方、CSSモジュールを使用すると、他のクラスを作成したり、他のCSSファイルから変数をインポートしたり、JSでさえCSSから変数をインポートしたりできます。

9
kumarharsh

ReactベースのエコシステムでCSSを記述する他の方法よりもスタイルコンポーネントが大好きな理由の1つは、ベストプラクティスを実施することです。悪夢であり、私はこれに同意することはできませんし、執行部分がどこに来るのですか？Reactコンポーネント階層を設計する必要がある方法である実際にモジュール式のコンポーネントを書いていない場合機能豊富なモジュールを構築するために）、同様のスタイルを何度も書き直しますが、スタイル付きコンポーネント（またはインラインスタイルを使用することもできます）を使用して、コンポーネントをボトムアップ形式で分割および構成できる場合）、コード共有はもう問題ではありません。さらなるコード共有はスタイリングレベルで議論される問題ではなく、カプセル化の共有はほとんどの場合コンポーネントレベルのものでなければなりません。CSSモジュールは単なるクラス名ですスタイル付きコンポーネントのスコープ制限ツールReactベースのプロジェクトでスタイリングするためのより宣言的なアプローチを提供します。

私が頭を包み込むことができなかった短所の1つに来るのは、スタイル付きコンポーネントがもたらすネストされたコンポーネント構造の一種です。私は自分のスタイルコンポーネントに名前を付けている間、より意味論的な認識を保とうとしましたが、それについて何かをする他のテクニックがあるかもしれないと確信しています。私自身はあまり問題を見つけていないので、それほど努力していません。

スタイル付きコンポーネントはおそらくCSSモジュールよりもパフォーマンスが少し劣ります。これは、スタイリングとレンダリング用のコンポーネントの作成にオーバーヘッドが伴うためです。しかし、それはわずかな違いです。

3
sudheer singh

通常のHTML属性を使用でき、必要に応じてJSを混在させることができ、状態、ネスト、メディアクエリをサポートします。いいえ、すべてがstyle = ""になるわけではありませんが、css-modulesのように、「実際の」class =属性を作成し、CSSを先頭に引き出します。

ClassNameをpropとしてのみ受け入れる場合は、カスタムコンポーネント（HTMLコンポーネントだけでなく）のスタイルを設定することもできます。

const Button = (props) => <button className={props.className}>{props.children}</button>

const CustomButton = styled（Button）display: inline-block; padding: 5px; const Item =（）=>クリックしてください！

他の技術のように欠点もありますが。主なことは、複数のプロジェクト間でコードを共有することが非常に難しくなる可能性があることです

速度が優先される場合、魅力的またはスタイル化されたコンポーネントは、Webアプリで使用できるものです。スタイル付きコンポーネントの文字列でスタイルを記述することは珍しいことかもしれませんが、訪問者は高速でロードされるWebページを高く評価するでしょう。スタイル付きコンポーネントを使用する場合は、 文字列内の構文の強調表示をサポートするプラグインをインストールする を忘れないでください。

Sass/cssおよびインラインスタイルも非常に高速ですが、コードをReactネイティブアプリに再利用することに決めた場合は、スタイルシートを書き直す準備をしてください。プリプロセッサは、Webアプリケーションに適しています。

0
MK Vimalan