React如何处理CSS选择器中的连字符？如何通过className在JSX中绑定样式？

1. React对CSS选择器连字符的处理 #

• 原生React配合普通全局CSS使用时，不会修改、转译CSS中带连字符（-）的选择器名称，不管是类名、ID名还是其他选择器的连字符，都会原样保留和匹配。
• 注意不要和JSX内联style属性的驼峰命名规则混淆：内联样式需要把CSS属性的连字符转成驼峰（比如background-color写成backgroundColor），是因为JavaScript对象的键名不支持直接用带连字符的字符串，和CSS选择器的处理逻辑无关。
• 如果使用CSS Modules、CSS-in-JS等第三方样式方案，连字符的处理规则由对应方案决定，和React本身无关。

2. 应用.button-set样式的方法 #

你只需要把JSX元素的className属性值设置为和CSS类名完全一致的button-set即可，连字符直接保留不需要修改，示例如下：

// 先确保你的CSS文件已经被正确引入到当前组件中
import './你的样式文件路径.css';

// 在JSX中直接使用类名
<button className="button-set">测试按钮</button>
<div className="button-set">测试容器</div>

只要CSS文件正确引入、类名完全匹配，对应样式就会生效。

如果你使用了CSS Modules方案，需要通过样式对象的方括号语法访问带连字符的类名：

import styles from './你的样式文件路径.module.css';

<button className={styles['button-set']}>测试按钮</button>

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