In NextJS I'm trying to apply both a static CSS-class and a conditional class to an element. Separated from each other I can make both work, but when combining them it will result in an unexpected error.
# This will work
<span className="font-medium">{message}</span>
# This will work too
<span className={status ? "bg-green-600":"bg-orange-600"}>{message}</span>
In Visual Studio the following snippet will give an 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>
Ignoring that will give following error:
Error:
x An object member cannot be declared optional
You need a space after font-medium, because it will be interpreted as a single class otherwise
<span className={"font-medium " + status ? "bg-green-600":"bg-orange-600"}>{message}</span>
And with template literals :
<span className={'font-medium ${status ? "bg-green-600" : "bg-orange-600" }'}>{message}</span>
(Please note it's `and not ' here)
In this type of cases, dont forget to debug by inspecting the element and checking the classes
You can also use backtick (`) as an alternative like this
<span className=`font-medium ${status ? 'bg-green-600' : 'bg-orange-600' `}>{message}</span>