Next.js使用module.css时如何同时绑定全局类名与module类名

你当前的写法是错误的。括号内的逗号操作符会直接返回最后一个表达式的值，最终只有全局类名my-global-class会生效，CSS Module定义的Style.MyModuleCssClass不会被绑定到组件上。

可行实现方案 #

可以同时绑定CSS Module类名和全局类名，两种类名规则互不冲突，常用实现方式如下：

• 方案1：模板字符串拼接（无动态类名时最简写法）

<Button 
  className={`${Style.MyModuleCssClass} my-global-class`}
  size="large"
  type="primary"
>
  GET MORE
</Button>

• 方案2：数组过滤拼接（适合存在条件类名的场景）
  如果需要根据条件动态增减类名，用数组加filter过滤空值后拼接，避免生成多余的空格：

<Button 
  className={[
    Style.MyModuleCssClass, 
    "my-global-class",
    isActive ? "active" : ""
  ].filter(Boolean).join(" ")}
  size="large"
  type="primary"
>
  GET MORE
</Button>

CSS Module的类名在编译时会被自动添加哈希后缀变成全局唯一值，和你传入的普通全局类名会同时挂载到组件的class属性上，样式规则会按正常的CSS优先级生效。

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