如何在JSX中为模块化CSS使用模板字符串实现动态className？

• 你当前的写法将styles.img作为模板字符串的标签函数使用，这种写法常见于styled-components等CSS-in-JS方案，不适用于CSS Modules场景。
• 你的项目中使用的是*.module.scss样式方案，导出的styles是普通键值对对象，所有属性值都是编译后的类名字符串，不存在可调用的img方法，因此触发img is not a function报错。你当前的写法等价于调用styles.img("i的取值")，和你预期的拼接类名逻辑完全不符。

场景1：你需要的类名是scss中预定义的img0、img1、img2...这类带序号的类 #

用方括号动态访问styles对象的属性即可，示例代码如下：

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

场景2：需要同时共用固定的img类 + 动态序号类 #

直接拼接两个类名字符串即可：

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

如果需要更灵活的类名切换逻辑，也可以引入classnames工具库简化写法。

内容的提问来源于stack exchange，提问作者rockon_d