How to append conditional className in Next.js? [duplicate]

Question

This is my button:

<button className="inline-flex items-center justify-center w-9 h-9 border-0 outline-0 bg-transparent cursor-pointer hover:bg-vivense-gray-100 transition ease-in-out duration-300" disabled={disabledIncrementButton} onClick={increment} >

I want to add bg-vivense-gray-100 to className according to the value "disabledIncrementButton".

For example, if disabledIncrementButton is true, then add bg-vivense-gray-100 to className;

<button **className={`inline-flex items-center justify-center w-9 h-9 border-0 outline-0 bg-transparent cursor-pointer hover:bg-vivense-gray-100 transition ease-in-out duration-300` ${disabledIncrementButton} ?? bg-vivense-gray-100}** disabled={disabledIncrementButton} onClick={increment} >

Note that if you are using tailwind, dynamically composed classes won't be working. — SyndRain
– SyndRain, Commented Jun 4, 2024 at 13:46
@SyndRain thanks. this answer for the question you shared works. Also, given style to a component crushes on class attributes. So, i can add the following code also style={disabledDecrementButton ? { backgroundColor: "#f5f5f5" } : {}} — Nursena Karakulah
– Nursena Karakulah, Commented Jun 4, 2024 at 18:21

Nursena Karakulah · Accepted Answer · 2024-06-04 18:23:51Z

Conditionally applying class attributes in react

here the answer. Also,

style={disabledDecrementButton ? { backgroundColor: "#f5f5f5" } : {}}

this works

Collectives™ on Stack Overflow

How to append conditional className in Next.js? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related