CSS モジュールを使用して React コンポーネントのスタイルを設定する方法

CSS モジュールは、CSS クラス名をローカルにスコープする方法を提供します。同じクラス名を使用する場合、スタイルのオーバーライドについて心配する必要はありません。

CSS モジュールがどのように機能するか、なぜそれらを使用する必要があるのか、React プロジェクトでそれらを実装する方法を調べてください。

CSS モジュールとは

の CSS モジュールドキュメントクラス名がデフォルトでローカルにスコープされている CSS ファイルとして CSS モジュールを記述します。これは、異なる CSS ファイルで同じ名前の CSS 変数を指定できることを意味します。

通常のクラスと同じように、CSS モジュールクラスを記述します。次に、コンパイラは、CSS をブラウザーに送信する前に一意のクラス名を生成します。

たとえば、styles.modules.css というファイルに次の .btn クラスがあるとします。

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

このファイルを使用するには、JavaScript ファイルにインポートする必要があります。

import styles from "./styles.module.js"

ここで、.btn クラスを参照して要素で使用できるようにするには、以下に示すようにクラスを使用します。

class="styles.btn"

ビルドプロセスは、CSS クラスを次のような形式の一意の名前に置き換えます。 _styles__btn_118346908.

クラス名の一意性は、異なるコンポーネントに同じクラス名を使用しても、それらが衝突しないことを意味します。コンポーネントの CSS スタイルをそのコンポーネントに固有の 1 つのファイルに保存できるため、コードの独立性を高めることができます。

これにより、特に複数のスタイルシートを使用している場合に、デバッグが簡素化されます。特定のコンポーネントの CSS モジュールを追跡するだけで済みます。

CSS モジュールを使用して、複数のクラスを結合することもできます。 構成する キーワード。たとえば、上記の次の .btn クラスを考えてみましょう。 Compose を使用して、そのクラスを他のクラスに「拡張」できます。

送信ボタンの場合、次のようにすることができます。

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

これは、.btn クラスと .submit クラスを組み合わせたものです。次のように、別の CSS モジュールからスタイルを構成することもできます。

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

他のルールの前に構成ルールを記述する必要があることに注意してください。

React で CSS モジュールを使用する方法

React で CSS モジュールをどのように使用するかは、React アプリケーションの作成方法によって異なります。

create-react-app を使用すると、CSS モジュールがすぐにセットアップされます。ただし、アプリケーションをゼロから作成する場合は、webpack などのコンパイラで CSS モジュールを構成する必要があります。

このチュートリアルを進めるには、次のものが必要です。

マシンにインストールされたノード。
ES6 モジュールの基本的な理解。
基本 Reactの理解 .

React アプリケーションの作成

物事をシンプルに保つために、次を使用できます 作成-反応-アプリ React アプリをスキャフォールディングします。

このコマンドを実行して新しい React プロジェクトを作成する react-css-modules と呼ばれます:

npx create-react-app react-css-modules

これにより、React を使い始めるために必要なすべての依存関係を含む、react-css-modules という名前の新しいファイルが生成されます。

ボタンコンポーネントの作成

このステップでは、Button コンポーネントと、Button.module.css という CSS モジュールを作成します。 src フォルダーに、Components という名前の新しいフォルダーを作成します。そのフォルダーに、Button という別のフォルダーを作成します。 Button コンポーネントとそのスタイルをこのフォルダーに追加します。

案内する src/コンポーネント/ボタン Button.js を作成します。

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

次に、Button.module.css という名前の新しいファイルを作成し、以下を追加します。

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

このクラスを Button コンポーネントで使用するには、スタイルとしてインポートし、次のようにボタン要素のクラス名で参照します。

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

これは、単一のクラスの使用方法を示す簡単な例です。異なるコンポーネント間でスタイルを共有したり、クラスを組み合わせたりすることもできます。このために、この記事で前述したように、composes キーワードを使用できます。

スナップスコアはどのように上昇しますか

コンポジションの使用

まず、次のコードで Button コンポーネントを変更します。

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

このコードは、型の値を prop として受け入れることで、Button コンポーネントをより動的にします。この型は、ボタン要素に適用されるクラス名を決定します。したがって、ボタンが送信ボタンの場合、クラス名は「送信」になります。「エラー」の場合、クラス名は「エラー」などになります。

各ボタンのすべてのスタイルを最初から記述する代わりに、composes キーワードを利用するには、次を Button.module.css に追加します。

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

この例では、1 次クラスと 2 次クラスが btn クラスを使用しています。これにより、記述する必要のあるコードの量を減らすことができます。

と呼ばれる外部 CSS モジュールを使用して、これをさらに進めることができます。 色.モジュール.css アプリケーションで使用される色が含まれています。その後、このモジュールを他のモジュールで使用できます。たとえば、Components フォルダーのルートに次のコードを使用して、colors.module.css ファイルを作成します。

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Button/Button.module.css ファイルで、プライマリクラスとセカンダリクラスを変更して、上記のクラスを次のように使用します。

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

CSS モジュールを使用した Sass

CSS モジュールを使用して、コードベースのモジュール性を向上させることができます。例として、ボタンコンポーネント用の単純な CSS クラスを作成し、コンポジションを通じて CSS クラスを再利用できます。

CSS モジュールの使用を強化するには、Sass を使用します。 Sass (Syntactically Awesome Style Sheets) は、大量の機能を提供する CSS プリプロセッサです。 CSS では使用できないネスト、変数、および継承のサポートが含まれています。 Sass を使用すると、より複雑な機能をアプリケーションに追加できます。