ReactでのCSSモジュールの使用

CSSモジュールの事例とそれらをReactアプリに実装する方法

CSSに比較的慣れていない場合は、アプリケーションのスタイルが拡張されるときに発生する重大な問題が発生する場合と発生しない場合があります。CSSルールはグローバルスコープに従うため、同じ名前の2つ以上のクラスが衝突します。複数のスタイルシートを処理し、CSSファイルの命名規則を追跡することは煩わしい場合があり、十分に注意しないと、同じクラス名からの競合が発生する可能性があります。

CSSモジュールは、特にアプリケーションの成長に伴って発生する可能性のあるこれらのエラーを解決できます。最終的には、デフォルトでクラス名をローカルにスコープすることで、セレクターやルールのエラーなしに、複数のファイルで同じクラス名を使用できるようになります。

CSSモジュールは単なる.cssファイルであり、クラスはJavascriptのローカル変数と同様に機能します。これは、名前にハッシュを含めることですべてのクラスを一意にするツールです。

CSSモジュールの作成

を使用している場合create-react-app、コンポーネントのCSSモジュールを作成するのは比較的簡単です。cssファイルの一般的な命名規則に従いますが、次のようmoduleに.css、の前に挿入します。[name].module.css

例を見るにはTask.module.css、簡単なToDoアプリ内のファイルを次に示します。

box別のコンポーネントに別の色の別のクラスがある場合、モジュールはローカルスコープを適用するため、これらのルールは衝突しません。

CSSモジュールスタイルシートをインポートし、対応する構成要素にCSSモジュールをインポートしますstylesか、[name]Styles。

JSXでは、次のように、定義されたCSSクラスをclassNameプロップとして使用します。

ここから、必要な数の他のCSSモジュールを追加できます。それぞれを異なる名前でインポートすることを忘れないでください。

CSSモジュールを使用すると、移植可能で再利用可能なCSSファイルを作成でき、セレクター名の衝突や別のコンポーネントのスタイルに影響を与えるルールを気にする必要がなくなります。

多くの場合、Reactアプリのスタイリングの決定に直面すると、開発者はCSSモジュールとCSS-in-JS（CSSをコンポーネントレベルに抽象化するためのツール）ライブラリ（styled-components、Emotion、styled-jsxなど）のどちらを使用するかで悩まされます。CSS-in-JSライブラリがより広く使用され、スタイルを宣言的に記述するために主流になっているので、特にスタイリングエクスペリエンスをはるかに向上させるモジュール式で再利用可能な品質のために、CSSモジュールが進むべき道であると多くの人が信じていることに気付きました。シームレス。