ReactからCSSモジュールに値を渡す方法

クラス名を動的に設定する方法: Reactコンポーネント内で、値を含む変数を定義し、それをクラス名に組み込むことができます。例えば、以下のように書くことができます:

import styles from './styles.module.css';
function MyComponent() {
  const color = 'red';
  return <div className={`${styles.container} ${styles[color]}`}>Hello, World!</div>;
}

上記の例では、styles.containerはCSSモジュール内のクラス名であり、styles[color]は変数colorの値に基づいて選択されるクラス名です。この方法を使用すると、Reactコンポーネント内の値をCSSモジュールに渡すことができます。

プロパティを使用する方法: Reactコンポーネントにプロパティを渡し、それをCSSモジュール内で使用する方法もあります。以下に例を示します:

import styles from './styles.module.css';
function MyComponent(props) {
  return <div className={`${styles.container} ${styles[props.color]}`}>Hello, World!</div>;
}

上記の例では、props.colorはReactコンポーネントに渡されるプロパティです。その値に基づいて、対応するCSSクラスが選択されます。

スタイルオブジェクトを使用する方法: Reactコンポーネント内でスタイルオブジェクトを作成し、それをCSSモジュール内で使用する方法もあります。以下に例を示します:

import styles from './styles.module.css';
function MyComponent() {
  const style = {
    backgroundColor: 'blue',
    fontSize: '16px',
  };
  return <div className={styles.container} style={style}>Hello, World!</div>;
}

上記の例では、styleオブジェクト内でスタイルを定義し、それをReactコンポーネントのstyleプロパティに渡しています。CSSモジュール内のクラス名は使用されず、直接スタイルが適用されます。

これらはReactからCSSモジュールに値を渡すいくつかの一般的な方法です。必要に応じて、これらの方法を組み合わせることもできます。選択した方法は、プロジェクトの要件や好みによって異なります。