Next.js中结合CSS Modules使用时如何正确编写className属性

Next.js CSS Modules 多类名/动态类名书写规范 #

CSS Modules 的className本质是字符串拼接，你只需要把自定义的classes对象属性值和其他全局类、动态类按规则拼接到一起即可，以下是对应场景的具体写法：

多个固定类名的写法 #

你可以直接用ES6模板字符串实现多类名拼接，区分两种场景：

• 混合自定义CSS Modules类+全局类（比如示例中fontawesome的fab、fa-typo3这类第三方全局类）的写法：

// 假设navbar-logo是你在xxx.module.css中定义的类
<a 
  className={`${classes['navbar-logo']} fab fa-typo3`} 
  onClick={closeMobileMenu}
>
  Home
</a>

注意：如果你的CSS Modules中用了短横线分隔的类名（比如.navbar-logo），JS中需要用classes['navbar-logo']的形式取值；如果你改成小驼峰命名.navbarLogo，可以直接用classes.navbarLogo，书写更方便。

• 所有类都是自定义CSS Modules类的写法：

// 假设navbar-logo、btn都是你在样式文件中定义的类
<a className={`${classes['navbar-logo']} ${classes.btn}`}>Home</a>

动态条件类名的写法 #

同样基于模板字符串，把三元表达式直接嵌入到模板中即可：

• 动态切换的是全局类的写法：

// 假设menu-icon是你自定义的CSS Modules类，fas类是全局fontawesome类
<i 
  className={`${classes['menu-icon']} ${click ? 'fas fa-times' : 'fas fa-bars'}`} 
/>

• 动态切换的是自定义CSS Modules类的写法：

<i 
  className={click ? classes['icon-close'] : classes['icon-menu']} 
/>

复杂类名场景的优化写法 #

如果类数量多、判断条件复杂，推荐用数组+filter(Boolean)的方式，避免字符串拼接出现多余空格、逻辑混乱的问题：

// 数组中可以放任意固定类、动态类、全局类
const classList = [
  classes['navbar-logo'],
  click ? classes.active : undefined,
  'fab fa-typo3'
].filter(Boolean) // 过滤掉undefined、空字符串等无效值

<a className={classList.join(' ')}>Home</a>

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