如何将模板文字字符串用于带有 JSX 的模块化 css？答案

【问题标题】：how to use template literal strings for modular css with JSX?如何将模板文字字符串用于带有 JSX 的模块化 css？
【发布时间】：2021-08-24 14:37:02
【问题描述】：

我希望在通过图像数组映射时能够提供不同的类名，如下所示：

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

但是，我在 Gatsby 上不断收到错误消息： ...文件路径中的函数 eval 错误进而 filepath_module_scss__WEBPACK_IMPORTED_MODULE_1_.default.img 不是函数

我在这里犯了什么语法错误？如果不是这样，我如何动态更改类名？

【问题讨论】：

【解决方案1】：

我不确定你的样式看起来如何，但也许会起作用：

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

或

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

【讨论】：