如何在css-modules中使用props变量动态设置className属性？

完全可以实现该需求，你现有代码的问题是动态属性访问和模板字符串的语法错误，修正后即可正常运行。

错误点说明 #

1. 你使用styles.color属于固定属性访问，会去查找styles对象里名为color的属性，而你实际需要访问的是和color变量值同名的属性，需要改用方括号动态属性访问语法：styles[color]
2. 你原有模板字符串的拼接语法错误，两个插值片段不需要分开写，合并到同一个模板字符串内即可。

修正后的代码 #

Component.js #

import styles from "./Component.module.scss"

const Component = ({ color }) => 
    <div className={`${styles.component} ${styles[color]}`}>
        Component
    </div>

Component.module.scss 无需修改 #

.component { border: 1px black solid; }
.red { color: red; }
.green { color: green; }

调用代码无需修改 #

<Component color="red" />
<Component color="green" />

补充优化建议 #

• 确保传入的color参数值和scss中定义的类名完全匹配（大小写、拼写一致），否则会取不到对应样式
• 可增加容错逻辑避免传入非法值时类名失效，示例：

  // 提前在scss中定义default类作为默认颜色
  <div className={`${styles.component} ${styles[color] ?? styles.default}`}>
  

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