如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加什么

Question

每当我在导航栏中的状态发生变化时，我希望 NavItems 的背景在它为 false 时是透明的，并在它为 true 时添加渐变背景。

我知道如果是普通的 CSS，我可以将 'NavItems active' 作为我的 className 和 ?operator 用于 if 语句，但是我该如何使用 CSS 模块呢？

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>

        );                   

Answer 1

编辑：正如 andy 所说，我提供的第一个解决方案可能会导致奇怪的错误，因此使用像 https://www.npmjs.com/package/clsx 这样的包更聪明（就像 debuchet 建议的那样）

第一个解决方案：

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

然后在你的 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;
}