TypeScriptとReactでCSSモジュールを使用する方法

まず、プロジェクトにCSSモジュールを導入するために、以下の手順に従います。

プロジェクトにTypeScriptとReactをセットアップします。必要な依存関係や設定ファイルをインストールし、Reactコンポーネントを作成します。
CSSモジュールを有効にするために、.css拡張子のファイルを.module.cssに変更します。これにより、ReactはそのファイルをCSSモジュールとして認識します。
CSSモジュールを使用するReactコンポーネントを作成します。例えば、Buttonというコンポーネントを作成する場合、Button.module.cssというファイルを作成します。
Button.module.css内で、ユニークなクラス名を定義します。例えば、.buttonというクラス名を指定します。
Reactコンポーネントのファイルで、CSSモジュールをインポートします。例えば、import styles from './Button.module.css';というように記述します。
Reactコンポーネント内で、クラス名を使用します。例えば、<button className={styles.button}>Click me</button>というように、styles.buttonをクラス名として指定します。

これで、CSSモジュールが正しく適用され、Reactコンポーネントごとにスコープが設定されたスタイルが適用されます。

また、CSSモジュールでは、スタイルを動的に変更する方法も提供されています。例えば、条件に応じてスタイルを切り替える場合、stylesオブジェクトを使用してスタイルを適用することができます。以下はその例です。

import React, { useState } from 'react';
import styles from './Button.module.css';
const Button = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  return (
    <button
      className={`${styles.button} ${isActive ? styles.active : ''}`}
      onClick={handleClick}
    >
      Click me
    </button>
  );
};
export default Button;

上記の例では、isActiveの値に応じて、activeクラスが追加されたり削除されたりします。

以上が、TypeScriptとReactでCSSモジュールを使用する方法の概要です。これにより、コンポーネントごとにスコープが設定されたスタイルを簡単に作成できます。