React中如何用CSS Modules动态添加类名后缀？

你之前的写法问题在于把styles.arrow当成字符串拼接了，但CSS Modules导出的styles是编译后的对象，类名已经被转换成唯一哈希值，不能直接通过字符串拼接访问属性。

正确的做法是用对象的方括号属性访问语法动态获取对应类名：

1. 单个动态类名 #

如果只需要动态的arrowX类：

className={styles[`arrow${id}`]}

2. 固定类名+动态类名组合 #

要同时使用box和动态arrowX类，有两种常用写法：

• 模板字符串拼接：

className={`${styles.box} ${styles[`arrow${id}`]}`}

• 数组转字符串（多类名场景更清晰）：

className={[styles.box, styles[`arrow${id}`]].join(' ')}

完整示例代码 #

import styles from './YourComponent.module.css';

function ArrowContainer({ id }) {
  // 限制id在1-4范围内，避免无效类名
  const validArrowId = Math.min(Math.max(id, 1), 4);
  
  return (
    <div className={`${styles.box} ${styles[`arrow${validArrowId}`]}`}>
      带动态箭头的容器
    </div>
  );
}

你之前的写法之所以无效，是因为拼接出来的是"box styles.arrow1"这类字符串，浏览器会去查找名为styles.arrow1的原始类名，但CSS Modules已经把arrow1编译成了类似YourComponent_arrow1_xyz的唯一类名，自然匹配不到。

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