En NextJS, estoy tratando de aplicar una clase CSS estática y una clase condicional a un elemento. Separados uno del otro puedo hacer que ambos funcionen, pero al combinarlos resultará en un error inesperado.
# This will work <span className="font-medium">{message}</span> # This will work too <span className={status ? "bg-green-600":"bg-orange-600"}>{message}</span> En Visual Studio, el siguiente fragmento dará un error ',' expected.ts(1005)
# This (where I'm trying to apply *both* classes to the same element) won't work <span className={"font-medium" + {status ? "bg-green-600":"bg-orange-600"}}>{message}</span>Ignorar eso dará el siguiente error:
Error: x An object member cannot be declared optionalNecesita un espacio después de font-medium, porque de lo contrario se interpretará como una sola clase
<span className={"font-medium " + status ? "bg-green-600":"bg-orange-600"}>{message}</span>Y con literales de plantilla:
<span className={'font-medium ${status ? "bg-green-600" : "bg-orange-600" }'}>{message}</span>(Tenga en cuenta que es 'y no' aquí)
En este tipo de casos, no olvides depurar inspeccionando el elemento y comprobando las clases.
También puede usar el acento grave (`) como una alternativa como esta
<span className=`font-medium ${status ? 'bg-green-600' : 'bg-orange-600' `}>{message}</span>