Next.js组件级CSS下，如何同时应用含变量的多个className？

问题核心 #

使用Next.js组件级CSS时，同时应用固定类colorBox和动态颜色类（如red、sky），但动态类未生效，问题出在动态类名的访问方式错误。

解决方案 #

将动态类名的写法从${styles}.${color}改为styles[color]。CSS Modules导出的是键值对对象，当类名是变量时，必须用方括号（[]）访问对象属性。

修改后的代码示例 #

React组件代码 #

import styles from "./ColorGroup.module.css";

const colors = ["red", "sky", "yellow", "green", "golden"];

const ColorGroup = () => {
  return (
    <div className={styles.colorContainer}>
      <text>Colour</text>
      <div className={styles.colorBoxContainer}>
        {colors.map((color, index) => (
          <div
            className={`${styles[color]} ${styles.colorBox}`}
            key={index}
          ></div>
        ))}
      </div>
    </div>
  );
};

CSS代码（无需修改） #

/* 布局相关代码 */

.colorBox {
  height: 36px;
  width: 36px;
}

.red {
  background-color: lightcoral;
}
.sky {
  background-color: skyblue;
}
.yellow {
  background-color: lightyellow;
}
.green {
  background-color: lightgreen;
}
.golden {
  background-color: greenyellow;
}

原写法失效原因 #

CSS Modules会将原始类名编译成唯一哈希类名（比如.ColorGroup_red__abc123），并通过styles对象提供映射——对象的键是原始类名，值是编译后的哈希类名。

之前的${styles}.${color}会把styles对象直接转为字符串（结果类似[object Object].red），这不是有效的类名，导致动态颜色类无法被正确识别。而styles[color]能正确访问到对应原始类名的哈希类名，让样式正常生效。

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