CODEWITHSUNDEEP
javascriptcssreactjsnext.js
JohnFoxtrot
JohnFoxtrot

Reputation: 11

NextJS conditional CSS?

Came across this when creating an animated dropdown for a navbar.

In a strict React implementation, an inline if/else statement can be used with an onClick toggle to set and remove CSS animation styles. In order to provide a default styling (with no animation) for when state is null, a class can be added before the inline if/else operation:

<div className={`navbar ${reactState ? "expanded" : "collapsed"}`}>

How do I replicate this in NextJS?

I can't find anything in the documentation and have blindly attempted the following (unsuccessfully):

<div className={styles.navbar (reactState ? `${styles.expanded}` : `${styles.collapsed}`)}>

<div className={styles.navbar [reactState ? `${styles.expanded}` : `${styles.collapsed}`]}>

<div className={styles.navbar `${reactState ? `${styles.expanded}` : `${styles.collapsed}`}`}>

The only success I've had is with the following, which seems like overkill:

<div className={
  reactState != null ?
    (reactState ? `${styles.navbar} ${styles.expanded}` 
    : `${styles.navbar} ${styles.collapsed}`)
  : styles.navbar
}>

I'm clearly not fully understanding how NextJS handles React styling. Any help would be appreciated.

Upvotes: 0

Views: 736

Answers (1)

OMi Shah
OMi Shah

Reputation: 6186

This should work, and it works as same as React. Only you didn't escape the values correctly.

<div className={`${styles.navbar} ${reactState ? styles.expanded : styles.collapsed}`}>...</div>

Upvotes: 1

Related Questions