React TypeScriptでCSS Modulesを使用したCSSの設定方法

目次

CSS Modulesを使用したCSSの設定方法

CSS Modulesを使用する際には、特別なライブラリをインストールするなどは必要ありません。
「index.tsx」と同じ階層に「index.module.css」のファイルを作成してください。
※「.module」はお作法ですので、なくても問題はありません。

「index.tsx」にて、CSSを使用する際には、以下の様にCSSをインポートします。

import styles from "./index.module.css";

「index.module.css」に以下の様なCSSがあった場合

.color_set_red {
  color: red;
}

以下の様に「className」にCSSを設定する事ができます。
※この例では、「Hello World」が赤字で表示されます。

<div className={styles.color_set_red}>Hello World</div>

サンプル

「index.tsx」のサンプル

import React from "react";
import styles from "./index.module.css";

const Sample = () => {
  return (
    <div className={styles.color_set_red}>
      Hello World
    </div>
  );
};

export default Sample;

「index.module.css」のサンプル

.color_set_red {
  color: red;
}