如何使用 JSX 的模块化 css 模板文字字符串？

Question

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

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

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

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

Answer 1

我不确定您的样式如何，但也许可以：

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

或

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

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