基于数值NextJS的圆背景色变化

Question

我想根据{id}值更改背景圆的颜色。我正在使用NextJs和Tailwind来设计样式。

 <div className="rounded-full  bg-fixed h-8 w-8" style={{color: {id} === "1" ? "black-900" : "red-900"}} />

Answer 1

谢谢我找到了正确的答案，基于你的评论，问题还在于，1应该没有引号。

 <div className={`rounded-full  bg-fixed h-8 w-8 ${ id === 2 ? 'bg-black-900' : 'bg-red-900'}`} />

Answer 2

尝试在className上使用三元操作符

<div
  className={`rounded-full  bg-fixed h-8 w-8 ${ id === '1' ? 'black-900' : 'red-900'}`}
/>;