【React】CSSモジュールの覚書

CRAだとCSSモジュールはパッケージを導入しなくても使える。ただしSASSモジュールは別途用意する。

サンプルコード

【React】

import React from 'react';
import styles from './style.module.css';

function Hoge() {
  return (
    <p className={styles.hogehoge}>
      <strong>ここにサンプルテキストが入ります。</strong>
    </p>
  );
}

export default Hoge;

【CSS】

.hogehoge {
  background-color: red;
}
.hogehoge strong {
  color: white;
}

classNameで指定する「styles.hogehoge」について、cssモジュールをインポートした変数名が「styles」、cssのclass名が「hogehoge」になる。