React+Tailwind コンポーネントの引数(変数)で色を設定したいとき

React+Tailwindの引数(変数)で色を設定したいとき

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

ご挨拶

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

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

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

Tailwindボタンサンプル

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

引数から動的に値を設定しようとして、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文で生成していたのですが結構面倒な作業でした。オブジェクトとタイプにそれぞれ一文ずつ追記するだけで色の指定ができるのはうれしいことです。

終わりに

as constの後ろについている文言に関しては、うまく解消できていないのでTypeScriptに詳しい同僚に記事を依頼しています。コードレビュー以外の方法で、指導をもらったのは初めてでした。有用な情報をいつもくれる友達には感謝ですね。

内容は単純なので、これで終了しておきます。

ではまた~

 

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です