如何在className中使用三元运算符

Question

<button className= {checked == false ? "w-32 h-32 rounded-2xl bg-white-200"
: "w-32 h-32 rounded-2xl bg-orange"}
onClick={() => {
setClicked(!checked)
}}>

我在利用顺风，做出反应。我试着把上面的代码改成下面的代码。

className=`w-32 h-32 rounded-2xl ${!checked ? 'bg-white-200' : 'bg-orange'}`

然而，出现了一个语法错误，当我稍微纠正它时，我觉得这个错误并没有得到比我想象的更多的解决。。我如何修改它以实现我想要的？

Answer 1

这应该可以完成

className={`w-32 h-32 rounded-2xl ${!checked ? 'bg-white-200' : 'bg-orange'}`}