Change background color of circle based on the numerical value NextJS-CodePudding

I want to change the color of the background circle based on the {id} value. I'm using NextJs and Tailwind CSS for styling.

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

CodePudding user response：

Try to use a ternary operator on the className:

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

CodePudding user response：

Thank you I found the right answer based on your comments, the issue also was that 1 should be without quotes.

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