React中如何同时使用CSS Modules与全局类？解决className重复报错

你不能在同一个JSX元素上声明两个className属性，这是JSX的语法规则，所以会报错"JSX elements cannot have multiple attributes with the same name."。

有两种简单的原生写法可以同时应用全局类和CSS Modules类：

1. 模板字符串拼接
   直接用ES6模板字符串把两个类名用空格分隔拼接：

import Header from "./ProductHeader.module.css";

// ...

<div className={`col-12 ${Header.title}`}></div>

2. 数组转字符串
   把类名存入数组，再用join(' ')方法转成空格分隔的字符串，这种方式更适合需要根据条件动态添加类名的场景：

import Header from "./ProductHeader.module.css";

// ...

<div className={["col-12", Header.title].join(' ')}></div>

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