NextJs css modules - variable in className

Question

I have a loop to duplicate elements several times. And I want to assign dynamic className to each element. I tried this method but the className is showing as ClassName='undefined1' ClassName='undefined2' , etc

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>
)
}

Desired outcome:

<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

edit: added Style.module.css file

can you post Style.module.css ?

Nico
– Nico

2021-09-06 12:17:58 +00:00
Commented Sep 6, 2021 at 12:17 — Nico
– Nico, Commented Sep 6, 2021 at 12:17
@Nico added it.

abood alwa7sh
– abood alwa7sh

2021-09-06 12:31:03 +00:00
Commented Sep 6, 2021 at 12:31 — abood alwa7sh
– abood alwa7sh, Commented Sep 6, 2021 at 12:31
check my answer

Nico
– Nico

2021-09-06 12:34:36 +00:00
Commented Sep 6, 2021 at 12:34 — Nico
– Nico, Commented Sep 6, 2021 at 12:34

Nico · Accepted Answer · 2021-09-06 12:38:04Z

CSS Modules locally scope CSS by automatically creating a unique class name, that means that if your Style.module.css is something like this :

.logo1{
  // some css rules
}

.logo2{
  // some css rules
}

Next will generate for each class name (logo1,logo2 ecc..) a unique classname different from the one provided inside Style.module.css
Basically Styles is an object with the class names as keys and the unique class names generated by next.js as property. This mean that you have to grab the class name in this way 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>
    )
    }

Note that the rendered html will have different class names but with the right css rules.

illia chill · Accepted Answer · 2021-09-06 11:27:54Z

-1

const numIn change to let numIn

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

And you add your variable like this:

<img className={variable} />

or

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

Your problem is Style.logo is undefined, maybe it's style.logo or styles.logo?

edited Sep 6, 2021 at 11:27

answered Sep 6, 2021 at 11:19

illia chill

2,07611 silver badges16 bronze badges

1 Comment

abood alwa7sh Over a year ago

hi i edited the code to better illustrate the problem. i tried your code but it doesnt work. as css modules reqiures this type of syntax: ClassName={Style.logo}

Collectives™ on Stack Overflow

NextJs css modules - variable in className

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related