CSS转JavaScript样式对象转换器
指导
CSS转JavaScript样式对象转换器
CSS 到 JavaScript 样式对象转换器可将 CSS 声明转换为 JavaScript 样式对象，反之亦然。无论您是处理 React 内联样式、React Native StyleSheets，还是 styled-components 和 Emotion 等 CSS-in-JS 库，此工具都能即时处理转换——无需再手动重写 camelCase。
如何使用
将您的 CSS 声明粘贴到输入面板中。选择所需的输出格式 — React 内联样式、React Native StyleSheet 或 styled-components 模板文字。转换器会实时处理每个属性：连字符名称会变为 camelCase，值会被正确引用或保留为数字，并且会正确处理供应商前缀。您还可以通过切换到 JS → CSS 模式来反向转换。点击复制按钮即可获取输出。
特征
- 双向转换 – 只需切换一次即可将 CSS 转换为 JS 样式对象或将 JS 对象转换回 CSS
- 多种输出格式 – 支持 React 内联样式、React Native StyleSheet 和 styled-components/Emotion 模板文字
- 智能 camelCase – 正确转换带有连字符的 CSS 属性 (background-color → backgroundColor)
- 供应商前缀处理 – 正确转换带有 -webkit-、-moz-、-ms- 前缀的属性 (例如，-webkit-transform → WebkitTransform)
- 数字值检测 – 将纯数字保留为数字 (margin: 0 保持为 0，而不是“0”)，同时引用字符串值
- React Native 优化 – 去除 px 单位并转换为数字（针对 React Native）
- 实时处理 – 输入时即时转换
- 一键复制 – 将转换后的输出复制到剪贴板
常问问题
-
为什么 CSS 属性在 JavaScript 中需要是 camelCase？
JavaScript 对象键不能包含连字符，除非加上引号。由于 background-color 和 font-size 等 CSS 属性使用连字符，因此它们必须转换为 camelCase (backgroundColor, fontSize) 才能用作未加引号的对象键。这是 JavaScript 语言规范的要求，而非框架约定。
-
内联样式和 CSS-in-JS 有何区别？
内联样式是直接传递给组件的 style 属性的 JavaScript 对象。它们仅支持 CSS 的一部分（不支持伪类、媒体查询或动画）。styled-components 和 Emotion 等 CSS-in-JS 库在运行时或构建时会生成实际的 CSS，支持完整的 CSS 规范，包括伪类、keyframes 和媒体查询，同时仍可在 JavaScript 中编写。
-
React Native 如何不同地处理 CSS 单位？
React Native 对尺寸使用无单位数字——编写 width: 100 表示 100 个与设备无关的像素。它不支持 px、em、rem 或 vh 等 CSS 单位。某些属性支持使用字符串表示的百分比值（例如，width: '50%'）。这是因为 React Native 渲染到原生视图，而不是浏览器 DOM，因此 Web 特定的单位没有意义。
-
JavaScript 样式对象中如何处理供应商前缀？
在 JavaScript 样式对象中，供应商前缀的 CSS 属性遵循特定的驼峰式大写模式。前缀会去掉开头的连字符并大写：-webkit-transform 变为 WebkitTransform，-moz-appearance 变为 MozAppearance。React 和其他框架使用此约定在渲染输出中应用正确的供应商特定样式。
