React项目中CSS类名短横线转驼峰的原因咨询

这是因为你使用了CSS Modules，它的转换规则导致了这种差异：

• CSS Modules会将CSS文件中的类名转换成符合JavaScript变量命名规范的格式。JavaScript变量名不能包含短横线（短横线会被解析为减号运算符），所以带短横线的类名（比如floating-Workups）会被自动转为驼峰式命名（floatingWorkups），这样就能通过styles.floatingWorkups这种对象属性的方式合法访问。

• 你也可以用字符串索引的方式直接访问原始类名，比如：

  <div className={styles['floating-Workups']}>
  </div>
  

  这两种写法都有效，但驼峰式是CSS Modules默认推荐的写法，更符合JavaScript的编码习惯。

另外，CSS Modules做这种转换的另一个核心目的是生成唯一的类名（编译后会变成类似app_floating-Workups_abc123这样的格式），避免不同组件的样式冲突，这也是它的核心特性之一。

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