スタイルの条件付き適用

clsxライブラリを使用することで、状態やその他の要因に基づいてスタイルを条件付きで適用可能。ドキュメントは こちらで確認可能ですが、ここでは重要な概念を解説。

statusコンポーネント内のInvoiceStatusに基づいて要素の色を変更する必要がある場合を想定。

• statusがawaitingの場合、背景色は赤、テキスト色は白。
• statusがfulfilledの場合、背景色は黄色、テキスト色は青。