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:

{, 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?


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

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


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