NextJs css 模块 - className 中的变量

Question

我有一个循环多次复制元素。我想为每个元素分配动态类名。我尝试了这种方法，但类名显示为 ClassName='undefined1' ClassName='undefined2' 等

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

function component() {
  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>
)
}

期望的结果：

<img className='logo1' />
<img className='logo2' />
<img className='logo3' />
<img className='logo4' />
<img className='logo5' />
<img className='logo6' />

Style.module.css:

.logo1 {
   width: calc(112px * 2);
   margin-top: -2rem;
   margin-left: 38vw;
}

.logo2 {
    width: calc( 5rem * 2);
    margin-top: 4rem;
    margin-left: 60vw;
    transform: rotate(-30deg);
}

.logo3 {
    width: calc( 4rem * 2);
    margin-top: 1rem;
    margin-left: 80vw;
    transform: rotate(-8deg);    
}

//etc

编辑：添加了 Style.module.css 文件

Answer 1

const numIn改为let numIn

//define you variable, any manipulations here 
let variable = "text-center"

然后像这样添加变量：

<img className={variable} />

或

<img className={`logo${numIn}`} />

你的问题是 Style.logo 是 undefined，也许是 style.logo 或 styles.logo？

Answer 2

CSS 通过自动创建唯一的 class 名称在本地范围 CSS 模块，这意味着如果您的 Style.module.css 是这样的：

.logo1{
  // some css rules
}

.logo2{
  // some css rules
}

Next 将为每个 class 名称（logo1、logo2 ecc..）生成一个 唯一的 class名称与 Style.module.css
中提供的不同基本上 Styles 是一个以 class 名称作为键并且由 next.js 生成的唯一 class 名称作为属性的对象。这意味着您必须以这种方式获取 class 名称 className={Style[`logo${numIn}`]}:

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

    function component() {
      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>
    )
    }

请注意，呈现的 html 将具有不同的 class 名称，但具有正确的 css 规则。

NextJs css 模块 - className 中的变量

NextJs css modules - variable in className

css-modules

next.js