React勉強中に、エラーから抜け出せなかったポイントも含めて簡単にご説明します。
私は、React＋TypeScript で開発しているので、違う方法だとやり方が異なる可能性があるので注意してください（）
なんで普通のCSSじゃだめなのか
普通のCSS（ピュアCSSと呼ぶらしいです）を使って最初開発していたのですが、全てのファイルで違うクラスにするように心がけていたのですが、なぜかインポートしてないファイルのクラスがなぜか反映しており、スタイルが崩れてしまう現象が生じました。
App.tsx で読み込んでるファイルで、読み込んでるCSSが反映されてる・・・みたいな
それを解消する方法はいろいろあるようなのですが、簡単に書ける「CSSmodule」という方法を選択しました。
書き方
書き方を簡単にご説明します。
（１）インポートしたいCSSのファイル名を「〇〇.module.css」にする
元々CSSファイルがあった場合は、
例）ServiceDetail.css と名付けてたファイルを ServiceDetail.module.css
のようににする
（２）ファイルを読み込む
ServiceDetail.module.css というファイルを読み込みたい場合は下記のように書きます
（下記は絶対パスを使用しています）
import styles from "@/styles/ServiceDetail.module.css";（３）クラス名を変更
あらかじめ「styles」という名前をつけていたので、{styles.クラス名} と書きます。
const Component = () => {
return <div className={styles.sectionLight}>サービス一覧</div>;
};たったこれだけで、この.tsx ファイルの中では必要なCSSだけ読み込むので、他に干渉しないという仕組みなようです。
注意点
しっかり上記の形で書いているはずなのに、エラーが出ることがあります。
書き方に注意が必要な場合があります。
クラス名にハイフンがある時の書き方
ハイフンがある場合は、 [] が必要です！
// 間違い
className={styles.section--light}
// 正しい
className={styles["section--light"]}複数あるクラスの書き方
<div className={`${styles.container} ${styles["section--light"]}`}>条件付きクラス
<div className={`${styles.container} ${isActive ? styles.active : ""}`}>まとめ
ほぼ自分用メモなので、簡単にしか書いていません。
しかも専門用語も使えてないペーペーでまだまだ学習不足ですが、頑張っていきたいと思います！
ご覧いただきありがとうございました！
