NextJS中如何实现类似React的条件CSS类名绑定？

在Next.js使用CSS Modules时，类名会被编译为唯一哈希值，必须通过styles.类名的方式引用，不能直接写字符串类名。你可以用以下几种简洁方式实现需求：

1. 模板字符串简化写法 #

直接用模板字符串拼接默认类和动态类，当reactState为null时，动态类部分为空，不影响默认样式：

<div className={`${styles.navbar} ${reactState != null ? (reactState ? styles.expanded : styles.collapsed) : ''}`}>

2. 数组过滤写法（更易读） #

将类名放入数组，过滤掉空值后用空格拼接，逻辑更清晰：

<div className={[
  styles.navbar,
  reactState != null && (reactState ? styles.expanded : styles.collapsed)
].filter(Boolean).join(' ')}>

3. 类名工具库（推荐） #

使用clsx或classnames这类工具库，可以更优雅地处理条件类名：
首先安装依赖：

npm install clsx

然后使用：

import clsx from 'clsx';

// 组件内
<div className={clsx(styles.navbar, {
  [styles.expanded]: reactState === true,
  [styles.collapsed]: reactState === false
})}>

这种方式会自动根据条件添加对应的类，reactState为null时只会保留styles.navbar。

为什么之前的写法失败？ #

你之前的错误写法都是语法问题：

• styles.navbar (reactState ? ...)：函数调用语法错误，缺少拼接运算符
• styles.navbar [reactState ? ...]：数组语法错误，未正确实现类名拼接逻辑
• styles.navbar ${...}``：模板字符串未正确包裹变量，正确格式应为${styles.navbar} ${...}

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