chot Inc.

chot Inc.

What is Jamstack?

CSS Modulesシーエスエスモジュール

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>
back to Top