Javascript React: CSS modulesとは？使い方について詳しく説明してあるサイトのリンクまとめ

CSS modulesの簡単な使い方と、詳しく説明してあるサイトのリンクをまとめます。CSS modulesを使用するにはreact-scripts@2.0.0以上のバージョンが必要です。

CSS modulesを使うメリットは、Webアプリケーションが大規模な場合、CSSのclassの名前がかぶった（同じだ）としても混乱することなく使用できることです。（Webアプリケーションがさほど大規模ではない場合は通常のcssファイルで対応可能）

CSS modulesの使い方

使い方は簡単で、まず、cssファイルの名前を変更します。Button.cssというファイルがあるならButton.module.cssとします。

次に、import先のファイル（例えばButton.js)などで、import xxx from'./Abc.module.css'とインポート。xxxは好きな文字列を使うことができます。

後はオブジェクトのように、ファイル内でclassNameとして{}内に指定するだけで使用することができます。

例：

Button.module.cssファイル

.error {
  background-color: red;
 }

another-stylesheet.cssファイル

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }

結果は、.error というクラス名に問題はおこらず、固有の名前が割り振られています。（割り振りは自動）

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

Create React Appの公式サイトでの説明

上記の例のサンプルコードはこちらのソースコードを引用しています。

⇒Adding a CSS Modules Stylesheet

GitHubのこちらのサイト

⇒https://github.com/css-modules/css-modules

後でゆっくり読もうと思っているこちらのサイト

⇒How to Use CSS Modules with Create React App (Medium Article by Ned Schwartz)