I would like to add a part of a classname dynamicall with modules.css.

My classnames are arrow1, arrow2, arrow3, arrow4. So I would like to change the number at the end dynamically.

className={`${styles.box}`   ' styles.arrow'   id}

I tried it liek this and some other ways, but it never worked. How can I add the number (id)?

CodePudding user response：

You're currently adding a string "styles.arrow1" which does not reference the styles object. Instead you can target your className like so

className={`${styles.box} `   styles["arrow"   id]}