CSS转JavaScript样式对象转换器
指导
CSS转JavaScript样式对象转换器
即时将 CSS 声明转换为 JavaScript 样式对象，或反向操作，将 JS 转换回 CSS。支持五种输出格式，包括 React 内联样式、React Native StyleSheet、styled-components、Emotion 和纯 JS 对象。支持供应商前缀、CSS 变量、数值检测以及带选择器剥离的完整 CSS 规则块 — 全部在您的浏览器中客户端处理。
如何使用
将您的 CSS 声明粘贴到输入区域，然后选择目标输出格式。转换器会自动将属性名称转换为 camelCase，处理供应商前缀，并为所选目标正确格式化值。切换到 JS-to-CSS 模式可将 JavaScript 样式对象转换回标准 CSS。一键复制结果到剪贴板。
特征
- 双向转换 – 将 CSS 转换为 JS 样式对象或将 JS 对象转换回 CSS
- 5 种输出格式 – React 内联样式、React Native StyleSheet、styled-components、Emotion css prop 和纯 JavaScript 对象
- 供应商前缀处理 – 正确转换
-webkit-transform到WebkitTransform,-moz-appearance到MozAppearance，以及其他供应商前缀属性 - 智能数值处理 – 将无单位数字保留为整数（
margin: 0保持0），React Native 会剥离 px 单位，React 则保留带单位的字符串值 - CSS 变量支持 – 处理自定义属性（
--custom-prop）和var()引用 - 选择器剥离 – 粘贴完整的 CSS 规则块，转换器仅提取声明
- Syntax Highlighting – CSS 和 JavaScript 均支持颜色编码输出，并可复制到剪贴板
常问问题
-
为什么 JavaScript 中的 CSS 属性需要 camelCase？
JavaScript 对象键不能包含连字符作为裸标识符。像 background-color 这样的属性将被解释为 background 减去 color。React 和其他 JS 框架中的约定是使用 camelCase 等效项：backgroundColor、fontSize、borderRadius。此转换器会自动处理转换，包括供应商前缀的特殊大小写规则。
-
React 和 React Native 样式处理之间有什么区别？
React 内联样式使用 camelCase 属性和包含 CSS 单位的字符串值，因此 font-size: 16px 变为 fontSize: '16px'。React Native 使用 StyleSheet API，其中像素值是没有单位的纯数字，因此相同的属性变为 fontSize: 16。React Native 也不支持所有 CSS 属性，特别是像 margin 这样具有多个值的简写属性。
-
如何转换供应商前缀到 JavaScript？
供应商前缀在 JavaScript 中遵循特定的字母大小写规则。前缀会去掉开头的连字符并大写：-webkit-transform 变为 WebkitTransform，-moz-appearance 变为 MozAppearance，-ms-grid-columns 变为 msGridColumns。请注意，ms 前缀按惯例是小写的，而 webkit、moz 和 o 是大写的。
-
我可以将 styled-components 或 Emotion CSS 转换回纯 CSS 吗？
是的。使用 JS-to-CSS 模式时，粘贴 JavaScript 样式对象，转换器会将 camelCase 属性转换回带连字符的 CSS 属性，展开字符串值，并将输出格式化为标准 CSS 声明。无论原始样式是为哪个 JS 框架编写的，此功能都有效，因为它们都使用相同的 camelCase 约定。
