关于此工具
CSS 转 JS 样式对象工具可将一段 CSS 转换为适用于 React 内联样式或 styled-components、Emotion 等 CSS-in-JS 库的 JavaScript 对象。它在你的浏览器本地解析声明——不上传任何内容——因此将样式表迁移到内联样式只需粘贴再复制即可。
每个属性名都会转为驼峰式：background-color 变为 backgroundColor，z-index 变为 zIndex。厂商前缀遵循 React 的规则——前导的 -ms- 小写为 ms（msFilter），而 -webkit-、-moz- 和 -o- 大写为 Webkit、Moz 和 O（WebkitBoxShadow）。自定义属性（--brand-color）会作为带引号的键原样保留。值默认输出为字符串，保留单位和 !important；数字开关可让裸整数和小数改为不带引号的数字。属于有效 JavaScript 标识符的键保持不带引号；其余的会自动加引号。
当输入是纯声明块（无选择器）时，它会生成一个扁平对象，非常适合 React 的 style prop。当输入包含带选择器的完整规则时，styled/Emotion 模式会输出一个以每个选择器字符串为键的嵌套对象——这些库接受的对象语法。你可控制输出的 const 名称，整个结果会写成 const styles = { ... }; 可直接粘贴。
常见问题
属性名如何转换？
带连字符的属性会转为驼峰式（background-color 转为 backgroundColor）。厂商前缀遵循 React：-ms- 变为小写的 ms 前缀，而 -webkit-、-moz- 和 -o- 变为 Webkit、Moz 和 O。像 --foo 这样的自定义属性会作为带引号的键保留。
值是数字还是字符串？
默认情况下每个值都是字符串，这始终安全并保持单位和 !important 完整。启用数字开关后，纯数字的值（如 z-index: 10）会改为输出为不带引号的数字。
两种模式有什么区别？
React 内联模式从声明块输出单个扁平对象。styled / Emotion 模式输出一个以选择器字符串为键的嵌套对象，匹配 styled-components 和 Emotion 为多条规则接受的对象语法。
它能处理带选择器的完整 CSS 规则吗？
能。如果输入包含选择器和花括号，每条规则会被解析为选择器键下各自的嵌套对象。无选择器的裸声明列表会生成一个扁平样式对象。