CSS Modules スタイルシートの追加

注意: この機能は react-scripts@2.0.0 以降で使用できます。

このプロジェクトでは [name].module.css のファイル名付け規則を使用して、通常のスタイルシートと一緒に CSS Modules をサポートしています。CSS Modules では、[filename]\_[classname]\_\_[hash] 形式の固有のクラス名を作成することで CSS のスコープを設定できます。

ヒント: Sass でスタイルシートを事前処理する場合は、インストール手順に従って、スタイルシートのファイル拡張子を以下のように変更してください: [name].module.scss または [name].module.sass。

CSS Modules を使用すると、名前の衝突を心配することなく、さまざまなファイルで同じ CSS クラス名を使用できます。CSS Modules の詳細については こちら を参照してください。

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>

これはオプションの機能です。通常の <link> スタイルシートと CSS ファイルも完全にサポートされています。CSS Modules は、.module.css で終わるファイルに対してオンになります。