NextJs中classnames条件表达式使用SCSS模块类的报错解决

核心问题分析 #

你遇到的, expected语法错误，是因为在classnames的对象参数中，使用动态CSS Modules类名作为键时，没有用**方括号[]**包裹表达式。同时，带连字符的类名（如mt-md-6）不能用对象点语法（s.mt-md-6）访问，必须用括号语法。

正确使用方式 #

1. 确保正确导入CSS Module

import classNames from 'classnames';
import s from './grid-images.module.scss';

2. 在classnames中使用动态类名

用方括号包裹CSS Modules的类名表达式，作为对象的键：

const itemClassName = classNames(
  // 你的基础Tailwind或自定义类
  'grid-item',
  {
    // 关键：用[]包裹动态类名作为键
    [s['mt-md-6']]: index === 2 || index === 3
  }
);

3. 可选：提前赋值类名简化代码

如果觉得表达式太长，可以先把类名赋值给变量：

const marginTopClass = s['mt-md-6'];

const itemClassName = classNames(
  'grid-item',
  {
    [marginTopClass]: index === 2 || index === 3
  }
);

4. 另一种写法：三元表达式

如果逻辑简单，也可以用三元表达式直接传入类名：

const itemClassName = classNames(
  'grid-item',
  index === 2 || index === 3 ? s['mt-md-6'] : ''
);

为什么之前的写法错误？ #

• 不带方括号的{s['mt-md-6']: ...}会被JS解析为字面量键名，导致语法错误——对象的键如果是变量/表达式，必须用[]包裹。
• s.mt-md-6无效是因为JS对象的点语法不支持带连字符的属性名，必须用括号语法s['mt-md-6']访问。

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