Aplicando Estilos Condicionalmente

Podemos aplicar estilos condicionalmente com base no estado ou em outros fatores utilizando a biblioteca clsx. A documentação pode ser encontrada aqui, mas abordaremos os conceitos mais importantes agora.

Imagine que seja necessário alterar a cor de um elemento com base no status dentro do componente InvoiceStatus. As seguintes condições se aplicam:

• Se o status for awaiting, a cor de fundo deve ser vermelha e a cor do texto deve ser branca;
• Se o status for fulfilled, a cor de fundo deve ser amarela e a cor do texto deve ser azul.