Voimme soveltaa tyylejä ehdollisesti tilan tai muiden tekijöiden perusteella käyttämällä clsx-kirjastoa. Löydät sen dokumentaation täällä, mutta käymme nyt läpi tärkeimmät periaatteet.

Kuvitellaan, että meidän täytyy muuttaa elementin väriä status-komponentin InvoiceStatus-kentän perusteella. Seuraavat ehdot pätevät:

• Jos status on awaiting, taustavärin tulee olla punainen ja tekstin valkoinen;
• Jos status on fulfilled, taustavärin tulee olla keltainen ja tekstin sininen.