CSS Modulesは、各コンポーネントに対してスコープを適用し、他のコンポーネントから隔離されたスタイルを提供するスタイリング方法の一種です。
CSS Modulesでは、クラスセレクターがユニークになるように変換することで、クラスセレクター同士が被らないようになっています。
以下のように、*.module.css
にすると、バンドラーツールが自動的に紐付けてくれます。
例:
/*index.module.css */
.hoge {
color: red;
}
/*index.tsx */
import styles from './index.module.css';
export const Home = () => <div className={styles.hoge}>ボタン</div>