CODEWITHSUNDEEP
reactjsnext.jstailwind-css
PiotrK
PiotrK

Reputation: 387

Change background color of circle based on the numerical value NextJS

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"}} />

Upvotes: 0

Views: 354

Answers (2)

PiotrK
PiotrK

Reputation: 387

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'}`} />

Upvotes: 1

lpizzinidev
lpizzinidev

Reputation: 13274

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'}`}
/>;

Upvotes: 0

Related Questions