React中两种CSS Modules类名访问语法的区别是什么？

这两种写法本质是JavaScript对象属性的两种访问方式，核心区别在于属性名的合法性和适用场景：

1. 语法规则差异 #

• classes.button 是点语法：仅能访问符合JavaScript标识符规则的属性名——属性名不能包含连字符、空格等特殊字符，也不能以数字开头。你的CSS中.button类名完全符合该规则，因此可以直接用点语法调用。
• classes["button--alt"] 是方括号语法：支持所有合法字符串作为属性名，包括带连字符、空格或数字开头的类名。你的CSS中.button--alt包含--特殊字符，用点语法会被JavaScript解析成递减运算符导致报错，所以必须用方括号访问。

2. 结合你的代码实例 #

对应你提供的CSS代码：

.actions .button--alt {
  color: #8a2b06;
}

.actions .button {
  background-color: #8a2b06;
  color: white;
}

• button是合法标识符 → 使用classes.button完全可行
• button--alt含特殊字符，不属于合法标识符 → 必须用classes["button--alt"]，若强行写classes.button--alt，JavaScript会将其解析为classes.button - alt，直接抛出语法错误。

3. 额外适用场景 #

方括号语法还有一个关键优势：支持动态拼接类名。比如根据组件状态切换类名时：

const btnType = isAlternate ? "button--alt" : "button";
<button className={classes[btnType]}>操作按钮</button>

这类动态场景下，点语法无法实现，只能依赖方括号语法。

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