Wir können Stile basierend auf Zustand oder anderen Faktoren mit der clsx-Bibliothek bedingt anwenden. Sie können die Dokumentation dazu hier finden, aber wir werden jetzt die wichtigen Konzepte behandeln.

Stellen wir uns vor, wir müssen die Farbe eines Elements basierend auf dem status innerhalb der InvoiceStatus-Komponente ändern. Die folgenden Bedingungen gelten:

• Wenn der status awaiting ist, sollte die Hintergrundfarbe rot und die Textfarbe weiß sein;
• Wenn der status fulfilled ist, sollte die Hintergrundfarbe gelb und die Textfarbe blau sein.