Next.js使用CSS Modules动态拼接className出现undefined如何解决

错误原因 #

你当前的写法${Style.logo}${numIn}会先读取Style.logo的值，但你的Style.module.css中不存在.logo类，只有.logo1、.logo2这类带序号后缀的类，因此Style.logo返回undefined，和序号拼接后就得到了undefined1这类错误的类名。

修正代码 #

改用方括号动态访问对象属性的写法，拼接完整的类名作为key读取CSS Modules导出的样式即可：

import Style from './css/Style.module.css'

// 注意React要求自定义组件首字母必须大写，因此调整了组件名
function MyComponent() {
  return (
  <div>
   {[...Array(7)].map((e, i) => {
       const numIn = i + 1
       return (
           <img 
             className={Style[`logo${numIn}`]} 
             src='/assets/svg/logo.svg' 
             alt="" 
             key={i} 
           />
       )
   })}
</div>
)
}

额外说明 #

如果你的需求是输出原始的不带CSS Modules哈希后缀的类名（也就是你期望的<img className='logo1' />效果），则不需要用CSS Modules导入的对象，直接拼接字符串即可：

className={`logo${numIn}`}

对应样式要写在全局普通CSS文件中，不要放在.module.css后缀的CSS Modules文件里。

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