React コンポーネントのスタイルを自由自在に操る： className props, CSS Modules, その他

React コンポーネントにクラス名を渡す方法

クラス名を props として渡す

最も一般的な方法は、className という props を使用して、親コンポーネントから子コンポーネントにクラス名を渡すことです。以下の例をご覧ください。

// 親コンポーネント
import React from 'react';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className="my-class" />
    </div>
  );
};

// 子コンポーネント
import React from 'react';

const ChildComponent = ({ className }) => {
  return (
    <div className={className}>子コンポーネント</div>
  );
};

この例では、ParentComponent は ChildComponent に className props を渡します。ChildComponent はこの props を受け取り、その値を className 属性に設定します。これにより、ChildComponent は my-class という CSS クラスでスタイル設定されます。

動的なクラス名を渡す

className props には、文字列だけでなく、条件に応じて変化する動的な値を渡すこともできます。例えば、以下の例では、isButton という props を使用して、ChildComponent がボタンかどうかを判断し、それに応じてクラス名を変更しています。

// 親コンポーネント
import React from 'react';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className={isButton ? 'button' : 'regular'} isButton={true} />
      <ChildComponent className={isButton ? 'button' : 'regular'} />
    </div>
  );
};

// 子コンポーネント
import React from 'react';

const ChildComponent = ({ className, isButton }) => {
  return (
    <button className={className} disabled={!isButton}>
      {isButton ? 'ボタン' : 'コンポーネント'}
    </button>
  );
};

CSS Modules を使用すると、コンポーネント内でスコープされた CSS クラスを定義できます。これにより、クラス名の衝突を回避し、コンポーネントのスタイルをより簡単に管理することができます。

CSS Modules を使用する場合は、className props にオブジェクトを渡すことができます。このオブジェクトには、コンポーネント内で定義された CSS クラスのプロパティが含まれます。例えば、以下の例では、ChildComponent は styles.button と styles.regular という CSS クラスを定義しています。

// styles.css
.button {
  background-color: blue;
  color: white;
}

.regular {
  background-color: gray;
  color: black;
}

// 親コンポーネント
import React from 'react';
import styles from './styles.css';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className={styles.button} isButton={true} />
      <ChildComponent className={styles.regular} />
    </div>
  );
};

// 子コンポーネント
import React from 'react';
import styles from './styles.css';

const ChildComponent = ({ className, isButton }) => {
  return (
    <button className={className} disabled={!isButton}>
      {isButton ? 'ボタン' : 'コンポーネント'}
    </button>
  );
};

その他のテクニック

上記以外にも、React コンポーネントにクラス名を渡すための様々なテクニックがあります。

• styled-components(

React コンポーネントにクラス名を渡す：サンプルコード

className props を使用する

// 親コンポーネント
import React from 'react';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className="my-class" />
    </div>
  );
};

// 子コンポーネント
import React from 'react';

const ChildComponent = ({ className }) => {
  return (
    <div className={className}>子コンポーネント</div>
  );
};

説明:

• この例では、ParentComponent は ChildComponent に className props として "my-class" という文字列を渡します。
• ChildComponent は className props を受け取り、その値を className 属性に設定します。
• これは、ChildComponent に "my-class" という CSS クラスが適用されることを意味します。

動的なクラス名を渡す

// 親コンポーネント
import React from 'react';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className={isButton ? 'button' : 'regular'} isButton={true} />
      <ChildComponent className={isButton ? 'button' : 'regular'} />
    </div>
  );
};

// 子コンポーネント
import React from 'react';

const ChildComponent = ({ className, isButton }) => {
  return (
    <button className={className} disabled={!isButton}>
      {isButton ? 'ボタン' : 'コンポーネント'}
    </button>
  );
};

• ChildComponent は isButton props を受け取り、className props に button または regular の値を設定します。
• isButton が true の場合、ChildComponent には "button" という CSS クラスが適用されます。

CSS Modules を使用する

// styles.css
.button {
  background-color: blue;
  color: white;
}

.regular {
  background-color: gray;
  color: black;
}

// 親コンポーネント
import React from 'react';
import styles from './styles.css';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className={styles.button} isButton={true} />
      <ChildComponent className={styles.regular} />
    </div>
  );
};

// 子コンポーネント
import React from 'react';
import styles from './styles.css';

const ChildComponent = ({ className, isButton }) => {
  return (
    <button className={className} disabled={!isButton}>
      {isButton ? 'ボタン' : 'コンポーネント'}
    </button>
  );
};

• この例では、ChildComponent は styles.css ファイルで定義された button と regular という CSS クラスを使用します。
• ParentComponent は ChildComponent に styles オブジェクトを渡します。

classNames ライブラリを使用する

// 親コンポーネント
import React from 'react';
import classNames from 'classnames';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent className={classNames('my-class', { active: isButton })} isButton={true} />
      <ChildComponent className={classNames('my-class')} />
    </div>
  );
};

// 子コンポーネント
import React from 'react';

const ChildComponent = ({ className, isButton }) => {
  return (
    <div className={className}>子コンポーネント</div>
  );
};

• この例では、classNames ライブラリを使用して

React コンポーネントにクラス名を渡す：その他の方法

インラインスタイルを使用する:

コンポーネントのスタイルを直接 JSX 内で定義したい場合は、style 属性を使用できます。これは、シンプルなスタイルを適用する場合や、動的なスタイルを生成する場合に役立ちます。

import React from 'react';

const ChildComponent = ({ isButton }) => {
  const styles = {
    button: {
      backgroundColor: 'blue',
      color: 'white',
    },
    regular: {
      backgroundColor: 'gray',
      color: 'black',
    },
  };

  return (
    <button style={isButton ? styles.button : styles.regular}>
      {isButton ? 'ボタン' : 'コンポーネント'}
    </button>
  );
};

React コンポーネントの合成を使用する:

コンポーネントのスタイルを再利用したい場合は、React コンポーネントの合成を使用できます。これにより、スタイルロジックを別々のコンポーネントにカプセル化し、コードをより整理することができます。

import React from 'react';

const Button = ({ children }) => {
  return (
    <button className="button">
      {children}
    </button>
  );
};

const RegularComponent = ({ children }) => {
  return (
    <div className="regular">{children}</div>
  );
};

const ParentComponent = () => {
  return (
    <div>
      <Button isButton={true}>ボタン</Button>
      <RegularComponent>コンポーネント</RegularComponent>
    </div>
  );
};

カスタムフックを使用する:

コンポーネントのスタイルロジックを共有したい場合は、カスタムフックを使用できます。これにより、スタイルロジックを別々のフックに抽出することができます。

import React, { useState } from 'react';

const useButtonStyles = () => {
  const [isButtonHovered, setIsButtonHovered] = useState(false);

  const styles = {
    button: {
      backgroundColor: isButtonHovered ? 'blue' : 'gray',
      color: 'white',
    },
  };

  return styles;
};

const ChildComponent = () => {
  const styles = useButtonStyles();

  return (
    <button style={styles.button} onMouseEnter={() => setIsButtonHovered(true)} onMouseLeave={() => setIsButtonHovered(false)}>
      ボタン
    </button>
  );
};

これらの方法は、状況に応じて使い分けることができます。シンプルなスタイルの場合は className props を使用するだけで十分ですが、より複雑なスタイルや再利用可能なスタイルが必要な場合は、他の方法を検討する必要があります。