Next.js中如何同时给元素添加静态和动态className？

报错原因 #

JSX语法不允许同一个元素声明多个同名属性，所以你写两次className属性必然会触发编译错误，和Next.js本身无关，是React JSX的通用语法规则。

可用的简化写法 #

1. 原生模板字符串写法（无额外依赖，最简洁）

直接用ES6模板字符串拼接静态类和动态类即可，浏览器会自动忽略类名之间的多余空格，无需额外处理：

<div className={`${styles.list} ${selected ? styles.half : ''}`}>

2. 数组过滤拼接写法（适合多动态类场景）

如果后续要加多个条件判断的动态类，用数组+过滤的写法可维护性更高，会自动剔除未命中的假值类，避免冗余空格：

<div className={[styles.list, selected && styles.half].filter(Boolean).join(' ')}>

如果有多个动态类直接往数组里加即可，比如：

<div className={[styles.list, selected && styles.half, disabled && styles.disabled].filter(Boolean).join(' ')}>

3. 工具类写法（适合复杂类名逻辑场景）

如果项目中类名判断逻辑比较多，可以用轻量工具库clsx（React生态常用，体积不到1KB），写法可读性更高：

// 先安装clsx：npm install clsx
import clsx from 'clsx'

<div className={clsx(styles.list, { [styles.half]: selected })}>

多条件场景下优势更明显：

<div className={clsx(
  styles.list,
  {
    [styles.half]: selected,
    [styles.disabled]: disabled,
    [styles.fullWidth]: isFull
  }
)}>

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