条件によるスタイル切り替え

状態（state）やpropsなどの条件に応じて、スタイルを柔軟に切り替える方法を紹介します。主に以下のような実装手法があります。

1. classNameを条件で付け替える

const Button = ({ active }: { active: boolean }) => {
  return (
    <button className={active ? 'btn active' : 'btn'}>
      条件付きボタン
    </button>
  );
};

.btn {
  background: gray;
}
.active {
  background: green;
}

2. inline style を切り替える

const Box = ({ show }: { show: boolean }) => {
  return (
    <div
      style={{
        display: show ? 'block' : 'none',
        backgroundColor: show ? 'skyblue' : 'transparent',
      }}
    >
      表示/非表示切り替え
    </div>
  );
};

3. styled-components で props による切り替え

import styled from 'styled-components';

const Label = styled.label<{ error?: boolean }>`
  color: ${props => (props.error ? 'red' : 'black')};
`;

const App = () => {
  const hasError = true;
  return <Label error={hasError}>入力エラーがあります</Label>;
};

4. CSS Modules と classnames を併用

import styles from './Form.module.css';
import classNames from 'classnames';

const Input = ({ valid }: { valid: boolean }) => {
  return (
    <input
      className={classNames(styles.input, {
        [styles.error]: !valid,
      })}
    />
  );
};

/* Form.module.css */
.input {
  border: 1px solid #ccc;
}
.error {
  border-color: red;
}

5. 状態によってコンポーネントそのものを切り替える

const SuccessMessage = () => <p style={{ color: 'green' }}>成功！</p>;
const ErrorMessage = () => <p style={{ color: 'red' }}>エラー発生</p>;

const Status = ({ status }: { status: 'ok' | 'error' }) => {
  return status === 'ok' ? <SuccessMessage /> : <ErrorMessage />;
};

補足：よくある条件切り替えの用途

• 入力バリデーション時のエラー表示
• active／非activeな状態の強調
• 読み込み中スピナーの表示
• モーダルの表示/非表示
• 選択済みアイテムのスタイル強調