CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
EJZ
EJZ

Reputation: 1256

Dynamically change Next.js style type for element

I am attempting to change the color of an element based off of the result from a function

  //Example function 
  if ("123".includes("5")) {
    color = "boldOrange"
  } else {
      let color = "boldGreen"
  }

In my CSS, I have two classes, boldGreen and boldOrange. This is the tag:

 <b className={styles.color}>(-3.44)</b>

How would I update the styling class based off of the function? I am using Next.js as my framework.

Upvotes: 0

Views: 1509

Answers (1)

Lory
Lory

Reputation: 36

you can try with this:

<b className={"123".includes("5") ? styles.boldOrange : styles.boldGreen}>
  (-3.44)
</b>

Upvotes: 2

Related Questions