React＋Tailwind コンポーネントの引数（変数）で色を設定したいとき

今回は、React＋TailwindCSSの環境で汎用コンポーネントを作成します。引数（変数）で色を変えたいという場合があるじゃないですか？そのコーディングで新しく学んだことがあるので共有します。引数で色を設定したい場合は、Switchではなくオブジェクトとして定義をしておきましょう。追加で色を設定するときのために対応しましょう。

1 ご挨拶
2 トピック
3 終わりに

ご挨拶

ども！今日も元気にTailwindを書いていますか？フロントでプロダクトを作るとほぼ確実にCSSを書くので、Tailwindは一週間に一度は書いています。龍ちゃんです。プロジェクト外でアプリを作成しているので、普段の三倍ぐらいコーディングをしていて楽しいです。

フリーでやっている勉強会で、CSSを引数によって振り分ける際の書き方について指導が入ったので、紹介していきたいと思います。忘れないようにブログにまとめていきたいと思います。汎用コンポーネントを作って、それを外部から使用したい場面は多くあると思います。今まではSwitch分で分岐させていたのですが、Objectで定義すると修正の手間も減るのは素晴らしいです。

今回取り扱うシナリオとしては、以下になります。

汎用コンポーネントとして、外部から色の設定を変更したい

引数から動的に値を設定しようとして、Tailwindの設定が反映されないという経験をした方もいるかと思います。ぜひ真似してもらえれば動くと思うので、試してみてください。

それでも動かないよ！って方はこちらの方のブログで解消できました。

トピック

今回提唱していきたいのは、「classNameで定義する情報をObjectで定義していこう」になります。コードとしては以下になります。

const colorCode = {
  main: 'bg-blue-400',
  error: 'bg-red-400',
} as const satisfies Record<string, string>;

こうすることで、カラーの指定と追加が格段に楽になりました。Componentとの合算コードは以下になります。


const colorCode = {
  main: 'bg-blue-400',
  error: 'bg-red-400',
} as const satisfies Record<string, string>;

type ButtonComponentProps = {
  text: string;
  onClick?: () => void;
  color: keyof typeof colorCode;
  disable?: boolean;
};

export const ButtonComponent = ({ text, color, onClick, disable = false }: ButtonComponentProps) => {
  return (
    <>
      <button onClick={onClick} className={'w-full max-w-sm font-noto text-xs py-2 text-white rounded ' + colorCode[color]} disabled={disable}>
        {text}
      </button>
    </>
  );
};

今までは、Switch文で生成していたのですが結構面倒な作業でした。オブジェクトとタイプにそれぞれ一文ずつ追記するだけで色の指定ができるのはうれしいことです。