what do I put in className if I am using CSS module with .active property

Question

Whenever my state in navbar changes, I would like to have the background of NavItems to be transparent when it's false, and add a gradient background when it's true.

I know that if it is normal CSS, I can just put 'NavItems active' as my classNamewith ?operator for if statement, but how do I do this with CSS module?

index.module.css

.NavItems{
    background: transparent !important;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-weight: bold;
    position: sticky;
    top:0;
    z-index:300;
}

.NavItems.active{
    background: linear-gradient(90deg, rgb(61,49,49) 0%, rgba(49,49,49,1)100%) !important;
}

index.jsx

return (
            <nav className={navbar ? styles.active : styles.NavItems}>
                <div> 
                    <Link to='/'>
                    <img className={styles.NavLogo} src={logo} alt='LaoMa Logo'/>
                    </Link>
                </div>
                <div className={styles.menu_icon} onClick={handleClick}>
                    <i className={click ? 'fas fa-times' : 'fas fa-bars'}>
                    </i>
                </div>
                <ul className={click ? styles.nav_menu.active : styles.nav_menu}>
                    {NavItems.map((item, index)=> {
                        return (
                            <li key={index}>
                                    <Link onClick={closeMobileMenu} className={styles[item.cName]} to={item.url}>
                                        {item.title}
                                    </Link>
                            </li>
                        )
                    })}
                </ul>
            </nav>

        );

Jonas Hendel · Answer 1 · 2021-08-16T19:08:17.020

0

Edit: As andy remarked, the first solution i provided may result in weird bugs, therfore it is smarter to use a package like https://www.npmjs.com/package/clsx (like debuchet suggested)

First solution:

className={`${navbar && styles.active} ${styles.NavItems}`}

and then in you css

.NavItems{
    background: transparent !important;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-weight: bold;
    position: sticky;
    top:0;
    z-index:300;
}

.active {
    background: linear-gradient(90deg, rgb(61,49,49) 0%, rgba(49,49,49,1)100%) !important;
}

edited Aug 16 '21 at 19:08

answered Aug 16 '21 at 18:43

Jonas Hendel

578
4
17

That doesn't work. Do you mean ```navbar``` instead of ```active``` in here ```className={`${active && styles.active} ${styles.NavItems}`}```? I use a hook to set the state to true or false depending on the value```window.scrollY``` – AnthonyDev220 Aug 16 '21 at 18:53
Yeah sorry, I updated it. Does it work now? – Jonas Hendel Aug 16 '21 at 18:57
1

This should help you a lot :) https://www.npmjs.com/package/clsx – dbuchet Aug 16 '21 at 18:57
The problem with using `&&` is that it will return a value that can end up being added as a class name, see here for more https://stackoverflow.com/questions/50377147/react-conditional-classnames-using-template-strings-and-operator so whilst it 'works' it can also lead to weird bugs – andy mccullough Aug 16 '21 at 19:04
@andymccullough didn't know that, thank you – Jonas Hendel Aug 16 '21 at 19:05
@andymccullough Yes, you are absolutely right. It works but because I write my navbar in a component and render it on top of other components in my main App.jsx, this property applies to my other pages as well which is something I do not want it to do. – AnthonyDev220 Aug 16 '21 at 19:15

what do I put in className if I am using CSS module with .active property

1 Answers1