使用CSS Module时，如何设置含.active属性的条件className？

核心问题说明 #

CSS Module 会给每个类名自动添加唯一哈希后缀，你原有写法存在两处错误：一是navbar为true时只加了styles.active，没有保留基础的NavItems类；二是styles.nav_menu.active这种写法无法正确获取到active对应的哈希类名。

解决方案 #

方法1：原生JS拼接类名（无额外依赖）

直接用模板字符串或者数组拼接的方式，始终保留基础类，状态触发时追加对应激活类即可，修正后的index.jsx核心代码如下：

return (
            {/* 导航栏类名修正：始终保留NavItems，navbar为true时追加active */}
            <nav className={`${styles.NavItems} ${navbar ? styles.active : ''}`}>
                <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>
                {/* 菜单类名修正：始终保留nav_menu，click为true时追加active */}
                <ul className={`${styles.nav_menu} ${click ? styles.active : ''}`}>
                    {NavItems.map((item, index)=> {
                        return (
                            <li key={index}>
                                    <Link onClick={closeMobileMenu} className={styles[item.cName]} to={item.url}>
                                        {item.title}
                                    </Link>
                            </li>
                        )
                    })}
                </ul>
            </nav>
        ); 

如果担心状态为false时会出现多余空格，可以用数组过滤的写法：

<nav className={[styles.NavItems, navbar ? styles.active : ''].filter(Boolean).join(' ')}>

方法2：使用类名工具库（更简洁，适合多条件场景）

如果项目中经常有条件类名需求，可以用clsx（或classnames）工具库，写法更清晰不易出错：
首先安装依赖：

npm install clsx

然后在JSX中导入使用：

import clsx from 'clsx'

// 类名部分写法
<nav className={clsx(styles.NavItems, { [styles.active]: navbar })}>
<ul className={clsx(styles.nav_menu, { [styles.active]: click })}>

注：你现有的index.module.css代码不需要修改，只要保证JSX中同时拼接了基础类和激活类，就能正确命中.NavItems.active的样式规则。如果没有其他更高优先级的样式覆盖，也可以考虑去掉代码中的!important声明，避免后续样式维护困难。

内容的提问来源于stack exchange，提问作者AnthonyDev220