NextJS conditional CSS?

Question

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.

It works exactly the same as in normal React, see the docs. But you have got an error with your string interpolation, you'll see the missing spaces if you open up the dev tools. E.g. ` ${styles.expanded} ` --> styles.expanded — Alicia Sykes
– Alicia Sykes, Commented Aug 13, 2022 at 15:50
Can you please tell me, How you imported the CSS file. I will guide you to solve this issue. — Shanu Raj
– Shanu Raj, Commented Aug 13, 2022 at 16:22

Omi Shah · Accepted Answer · 2022-08-13 15:51:43Z

1

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>

answered Aug 13, 2022 at 15:51

Omi Shah

6,3143 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS conditional CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related