開発者ドキュメント

CSS-in-JSラウンドアップ：Reactコンポーネントのスタイリング

getdocs

一緒に、累積されたGitHubスターの合計で判断された上位15のCSS-in-JSライブラリを見ていきます。 それらの機能、長所、短所を比較します。 含まれているのは、次のようないくつかの本当に新しいライブラリです。 emotion、およびいくつかのオリジナル、 aphrodite.

あなたが私のようなら、CSS-in-JSトレインに乗るのに少し時間がかかりました。 それが何かわからない場合は、 @vjeuxのオリジナルの「React：CSSinJS」スライドをチェックする価値があります。 ほぼ3年早送りし、今日では、JavaScriptを使用してReactコンポーネントのスタイルを設定するのに役立つCSS-in-JSライブラリが不足していません。 実際、これを書いている時点では、@MicheleBertoliのcss-in-jsリポジトリに55のそのようなライブラリがリストされています。各ライブラリ。 とても助かりました！

約6か月ごとに、新しいライブラリが出現します。 JavaScriptの疲労を誘発するどころか、この変化率は非常に励みになります。 それぞれの新しいアプローチは、以前のライブラリの長所に基づいて構築され、以前のライブラリのいくつかの欠点を革新します。 新しいライブラリのいくつかはより多くの機能とパフォーマンスを提供しますが、古いライブラリのいくつかの寿命についてはまだ言われることがあります。それがそれらも含まれている理由です。 次のプロジェクトでどちらを使用するかを決定するときは、このことを念頭に置いてください。

簡潔にするために、ここでは短くし、コードサンプルは含めません。 各ライブラリがどのように使用されているかを確認したい場合は、各プロジェクトのGitHubリンクをチェックして、その完全な説明を読んでください。

感情

emotion ブロックの新しい子供です。 しかし、その時代には、印象的な一連の機能を提供するだけでなく、非常に急速に勢いを増しているようです。 これは、優れた開発者エクスペリエンスとパフォーマンスへの執着のスイートスポットになります。 ここでのキラー機能は、両方のスタイル付きコンポーネントの組み合わせと、ネストされたコンポーネントに従来のセレクターを提供する機能です。 emotion 注目する価値は間違いありません。

グラマラス

glamorous 人気のラップ glamor ライブラリと提供 styled-component-経験に似ていますが、補間された文字列ではなくJavaScript構文を使用します。 テーマと同様に、動的な小道具は他のライブラリよりもこのライブラリにとって大きな勝利です。 JavaScript構文を使用してスタイル付きのReactコンポーネントを作成して実験したい場合は、 glamorous あなたにぴったりかもしれません。

styled-jsx

styled-jsx 追加することができます <style jsx /> コンポーネントのレンダリング関数内のタグ。 これにより、プレーンCSSでスタイルを記述でき、これらの内部のCSSは、そのレベルでレンダリングされているDOMの現在のスコープにのみ適用されるという追加の利点があります。 あなたがあなたのCSSをあなたの中に混ぜたいなら render 関数、 styled-jsx そこら中にあなたの名前があります。

jsxstyle

jsxstyle 単にスタイリングの目的で使用するHTML要素について考えるのを忘れることができます（例： <div />, <span />, <table />など）、代わりにこれらのスタイル付きコンポーネントを使用します（<Block />, <Flex />, <Inline />, <Table />など）。 また、CSSの規範の多くを無視し、代わりに、疑似セレクターを小道具として指定できるという興味深い開発者エクスペリエンスを提供します（例： hoverColor). あなたが書くことの退屈を取り除くことを探しているなら <div className={styles.container} /> 100回目はチェックアウトしてください jsxstyle.

TypeStyle

TypeStyle はCSSのTypeScriptであるため、この名前が付けられています。 焦点は、コンパイル時のリンティング、オートコンプリートなどです。 優れた開発者エクスペリエンスを確保し、実行時の問題から保護します。 何よりも、フレームワークに依存しないため、一度学習すればどこでも使用できます。 すでにTypeScriptファンの場合は、 TypeStyle 一見の価値があります。

スタイル付きコンポーネント

遠く離れて最も人気のあるCSS-in-JSライブラリ、 styled-components 問題をひっくり返します。 既存のコンポーネントにスタイルを追加するのではなく、スタイルを具体化するコンポーネントを作成します。 これにより、通常のHTML要素と本格的なReactコンポーネントの中間にある宣言型の再利用可能なコンポーネントが可能になります。 この哲学とGraphQL風の文字列補間には少し慣れが必要ですが、2位のCSS-in-JSライブラリのほぼ2倍の人気があることから、ここで一見の価値があると言っても過言ではありません。で。

グラマー

の本当の力 glamor CSSルールを記述して組み合わせることができる機能にあります。 通常、CSS-in-JSルールの拡張/上書きは面倒な場合があります。 でも、 glamor コンポーネントのプロップ内に順番にスプラットするか、コンポーネント内にリストすることができます className. 信頼できる「期待するもの」ライブラリを探しているなら、それ以上探す必要はありません。 glamor.

styletron

styletronの名声は、最適化、高速化、デッドCSSプルーニングなどを提供するために、JSからCSSへの変換を抽象化する「仮想CSS」（「仮想DOM」など）の使用に由来する速度です。 。 特に焦点となるのは、ページの読み込み時間を短縮するために、サーバー側のレンダリングに挿入されるCSSを最小限に抑えることです。 速度を大幅に向上させる優れた開発者エクスペリエンスを探している場合は、まず次の項目を確認してください。 styletron.

ラジウム

radium は、メディアクエリ、疑似セレクター、および修飾子の処理の問題を解決しようとする元のCSS-in-JSライブラリの1つでした。 それは今でも最も人気のあるライブラリの1つであり、その実用性と寿命を物語っています。

CSSモジュールを反応させる

react-css-modules Reactコンポーネントで純粋なCSSを記述できるようになるので近いです。 文字通り、あなたはインポートします .css ファイルとそのキーを className 小道具。 最初のCSS-in-JSライブラリの1つとして、それが解決しようとしていた主な問題は、CSSセレクターのスコープでした。 babel-plugin-react-css-modulesがあなたのニーズを満たすかどうかを確認する価値があります。 機能は少ないですが、パッケージがはるかに小さく、パフォーマンスがはるかに高くなっています。

アフロディーテ

aphrodite カーンアカデミーの善良な人々によって書かれ、維持されています。 元のCSS-in-JSライブラリの1つとして、解決しようとした主な問題は、CSSパリティを取得することでしたが、JavaScript構文を使用することでした。 そのため、セレクター、メディアクエリ、アニメーションなどに焦点が当てられています。 あなたが確立されたメンテナの長寿を持っている尊敬されている図書館を探しているなら、 aphrodite JSライブラリの嵐のアンカーになる可能性があります。

ReactCSS

オリジナルのCSS-in-JSライブラリの1つとして、 reactcss 小道具に基づいてスタイルを動的に交換することに焦点が当てられました。 これは多くの新しいライブラリの機能ですが、これは当時の時代に先駆けた機能であったことに注意してください。 特に完全なCSSサポート（自動プレフィックスを含む）またはReact Nativeサポートが必要な場合は、まだ検討する価値があります。

👉@MicheleBertoliとcss-in-jsの他のすべての貢献者に感謝します。

モバイルバージョンを終了