粘贴 CSS 声明,得到 React 内联 style 对象,kebab 键转驼峰、厂商前缀正确处理、无单位数字可选裸数字、浏览器本地
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
完全在浏览器里跑,CSS 由纯 JavaScript 解析,不上传也不记录。输入会同步进 URL,分享链接可复现;涉及保密的主题 token 请手动复制输出,别分享链接。
这个工具能做什么
免费的 CSS 转 React style 对象工具。粘贴一段 CSS 声明,或带选择器的整段 规则,就能拿到一个可以直接塞进 React「style 属性」的 JavaScript 对象。 每个属性名都按 React 要的样子转成驼峰:「background-color」变 「backgroundColor」,「border-top-left-radius」变「borderTopLeftRadius」。 厂商前缀也处理对:「-webkit-box-shadow」变「WebkitBoxShadow」,React 对 微软前缀的特例则把 ms 保持小写,「-ms-flex」变「msFlex」。CSS 自定义属性 像「--brand」原样保留,作为带引号的字符串 key,这正是 React 透传它们的 方式。打开一个开关,无单位数字会输出成裸数字(「zIndex: 10」、 「lineHeight: 1.5」)而不是字符串,跟 React 自己渲染的形状一致;带单位的 值仍保持带引号字符串。全部在浏览器里运算,一键复制,分享链接能还原你的 原始输入。100% 浏览器本地,不上传。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 转 Style 对象 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把设计师给的 CSS 直接塞进 React 组件
设计师给你一段卡片的 CSS:内边距、阴影、圆角,还有几行带厂商前缀的。 整段粘进去,拿到一个每个 key 都已转驼峰、「-webkit-」前缀也正确大写 的 style 对象,贴到你的「<div style={{ ... }}>」上。不用手动改十二个 属性,也不会因为你把「msFlex」写成「MsFlex」而被悄悄丢掉。
把旧的内联样式组件迁移成对象
你接手一个还在用字符串样式或老 CSS 文件的组件,要把它改成带类型的 内联样式。把每条规则的声明复制进来,打开裸数字开关,「zIndex」和 「lineHeight」就以数字输出,你得到一个能通过 React「CSSProperties」 类型检查的对象,不会因为该用数字的地方写了带引号数字而满屏红线。
把 DevTools 计算样式转出来做快速原型
你在复刻一个线上站点的布局。打开 DevTools,从 Styles 面板复制声明, 粘到这里。解析器能搞定末尾的分号、「rgb(0, 0, 0)」里的逗号和 「url(...)」值而不卡壳,给你一个能丢进临时 React 沙盒的对象,几秒就 看到效果。
做 token 预览或 styled-component 兜底
你把设计 token 存成 CSS 自定义属性,想在预览页里镜像成一个 JS 对象。 把「--brand」「--space」「--radius」几行粘进来,工具把每个保留成带 引号的字符串 key,「'--brand': '#06e6d7'」,正是 React 透传到 DOM 的 形状,你的「var(--brand)」引用在运行时仍能解析。
常见踩坑
属性名还留着连字符。React 把 style 的 key 当驼峰 IDL 名读,像「'background-color'」这样的 key 被当成普通自定义字符串,被悄悄忽略,样式根本不生效。一律转驼峰,这工具替你做。
把 ms 前缀首字母大写了。别的前缀都是首段首字母大写,大家就照着写成「MsFlex」,但 React 把微软前缀保持小写「msFlex」。大小写错了,这条规则会被丢掉且不报错。
给 React 要裸数字的属性加了引号,或给该带单位的值留成了裸的。lineHeight 写成数字 1.5 没问题,width 写裸数字 100 会悄悄变成 100px,而带引号的 width 100 是无效的。逐个属性对照,无单位数值用数字,带单位的用带引号字符串。
隐私说明
每一步,从解析 CSS、把 key 转驼峰,到判断哪些值留字符串哪些变裸数字, 都是浏览器标签页里运行的纯 JavaScript。CSS、token 和任何值都不离开页面, 也不记录。唯一要注意:分享链接会把输入写进查询字符串,所以把分享链接 粘到聊天里,对方服务器的访问日志会留下这段 CSS。涉及保密的主题 token, 请用复制按钮粘贴输出,而不是分享网址。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。