Next.js中如何通过styles.selector语法实现条件类名切换？

开发者阿泽

2026-8-21

Next.js 条件切换CSS Modules类名的解决方案

在Next.js里用CSS Modules时，不能直接写字符串类名，得通过styles对象访问定义好的类，给你几种可行的实现方式：

方法1：三元表达式直接映射

把React里的字符串类名换成styles对象对应的属性，要是类名是短横线分隔的（比如drop-menu），用方括号访问：

<div className={isActive ? `${styles['drop-menu']} ${styles['menu-2']}` : undefined}>
  <a>text</a>
</div>

要是你在CSS文件里把类名写成驼峰式（比如dropMenu），也可以直接用styles.dropMenu访问。

方法2：模板字符串动态拼接

多类名组合时，模板字符串更清晰，用.trim()避免空字符串类名：

<div className={`${isActive ? styles['drop-menu'] : ''} ${isActive ? styles['menu-2'] : ''}`.trim()}>
  <a>text</a>
</div>

方法3：用classnames库简化（推荐）

安装库后能更简洁处理多类名判断：
先安装：

npm install classnames

然后引入使用：

import classNames from 'classnames';

// 写法1：对象格式
<div className={classNames({
  [styles['drop-menu']]: isActive,
  [styles['menu-2']]: isActive
})}>
  <a>text</a>
</div>

// 写法2：简洁版
<div className={classNames(isActive && styles['drop-menu'], isActive && styles['menu-2'])}>
  <a>text</a>
</div>

这个库会自动处理空值，不用手动去空格，复杂场景下特别好用。