React className - element.module.css + state.conditional

Question

I'm trying to make a mobile drop down for a React web app.

I'm interested in the correct syntax to use when adding multiple classes to a react element. I want to add styling via an imported module, as well as adding style based on state.

Here is my code.

<div className={[css.mainNavigation, `${this.state.isActive === true ? 'active' : ''}`].join(' ')}>
 </div>

The code is adding .active to my element, however the styling for .active is not coming through.

In my navbar.module.scss, the following code are the relevant lines.

@media (max-width: 650px) {
      .mainNavigation {
        display: none;
      }
      .active {
        display: flex;
      }
    }

I'm guessing it has something to do with the fact that on the frontend, once all the code is rendered, the imported scss style module is using different className's than I am setting. For instance, where I use the classname <div className={css.mainNavigation}>, on the front end, it looks like this:

<div class="_1jGJsP2ItGoSSFd9cLCFqV ">

And after clicking, like this

<div class="_1jGJsP2ItGoSSFd9cLCFqV active">

Yet the .active css, within my modular.scss file is not coming through.

hiddenuser.2524 · Accepted Answer · 2020-03-30 17:17:03Z

1

While you could do this manually I recommend you try clsx https://github.com/lukeed/clsx It is a very small utility designed to do exactly what you want and it's quite easy to use as well.

You can also go for classnames, which more popular https://github.com/JedWatson/classnames

answered Mar 30, 2020 at 17:17

hiddenuser.2524

5,0081 gold badge19 silver badges22 bronze badges

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

4 Comments

IndustryDesigns Over a year ago

Is it so complex to do it manually that a small utility is required? I'm learning React at the moment so would prefer doing things manually while in the learning stage. My code above gives the element the correct class, however the styles don't apply.

hiddenuser.2524 Over a year ago

Your code looks good but maybe you didn't import the styles correctly. How are you doing the import of css? And no, of course you don't need it absolutely but it's quite easy to use/learns and helps you a lot

IndustryDesigns Over a year ago

Hey, thanks. The styles are both loading from the same module.css sheet, so it should work. At the bottom of my css style sheet, I have this: @media (max-width: 650px) { .mainNavigation { display: none; } .active { display: flex; } } The class is toggling on and off the element, but the menu is not changing display nor registering .active styles. I'm guessing it has something to do with the fact that it looks as though className's are transformed when imported, so maybe it's not getting .active.

IndustryDesigns Over a year ago

Hey, I've added to the original question, as it's hard to format properly in comments

IndustryDesigns · Accepted Answer · 2020-03-30 17:52:37Z

0

I figured it out.

I needed to add the className as css.active not active.

${this.state.isActive === true ? css.active : ''}

answered Mar 30, 2020 at 17:52

IndustryDesigns

2,2582 gold badges14 silver badges23 bronze badges

Collectives™ on Stack Overflow

React className - element.module.css + state.conditional

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related