Search code examples
javascriptreactjssyntaxtemplate-literals

how to use template literal strings for modular css with JSX?

I want to be able to give a different className when mapping through an array of images like so:

{array.map((step, i) => {
        return (
          <>
            <img className={styles.img`${i}`} />
          </>
        )
      })}

However I keep getting an error on Gatsby: Error in function eval in ...file path and then filepath_module_scss__WEBPACK_IMPORTED_MODULE_1_.default.img is not a function

What syntax error am I doing here? How can I dynamically change classNames if not like this?

Solution

  • I am not sure how your styles look like but maybe that would work:

    <img className={styles.img[i]} />

    or

    <img className={styles[`img${i}`]} />