CSS 转 JS 转换器
将 CSS 声明转换为 JS 样式对象(React 内联样式、React Native StyleSheet、styled-components、Emotion 或纯对象)——以及从 JS 转回 CSS。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "css-to-js",
"cssInput": ".container {\n display: flex;\n background-color…",
"outputFormat": "react"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-to-js-converter` tool (CSS to JS Converter) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-to-js-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 转 JS 转换器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此工具的功能
CSS-in-JS 库和 React 不接受普通 CSS 语法——它们需要一个 JavaScript 对象,其中属性是 camelCase,值是(主要)带引号的字符串。此工具将您已有的 CSS 声明(从样式表复制、设计工具导出或手写)转换为该对象形式,也可以反向转换:粘贴 JS 样式对象并获取普通 CSS。
支持五种 CSS 转 JS 的输出格式:
- React 内联样式 — 普通
const styles = { ... }对象,准备好用于style={styles}。 - React Native StyleSheet — 包装在
StyleSheet.create({ container: { ... } })中,px单位去除为纯数字(React Native 没有单位字符串)。 - styled-components — 标记模板字面量(
styled.div\...``) 保留您的原始 kebab-case CSS,因为 styled-components 接受真实 CSS 语法。 - Emotion css 属性 — 与 React 相同的 camelCase 对象形式,包装在
css({ ... })中。 - 纯 JS 对象 — 仅对象字面量,没有周围的变量声明,可粘贴到您自己的代码中。
如何使用
- 选择转换方向: "CSS 转 JS"(默认)或 "JS 转 CSS"。
- 粘贴您的 CSS 声明(完整的规则块,如
.card { ... }或普通的property: value;行都可以)——或,对于 JS 转 CSS,粘贴 JS 样式对象。 - 对于 CSS 转 JS,从上面的五个选项中选择输出格式。
- 转换后的代码立即出现在输出框中。复制它或下载为
styles.js。
转换详情
- 属性名从 kebab-case 转换为 camelCase(
background-color→backgroundColor) 并反向转换。 - 带厂商前缀的属性遵循 React 约定:
-webkit-transform→WebkitTransform、-ms-overflow-style→msOverflowStyle(小写ms,不同于其他前缀)。 - CSS 自定义属性(
--my-color) 保持不变并作为对象键加引号。 - 纯数值(
z-index: 10、line-height: 1.5) 变成不带引号的 JS 数字;其他所有内容都变成单引号字符串。React Native 还将padding: 16px这样的px值转换为纯数字16。 - 输入中的声明顺序在输出中保持。
常见问题
它能处理完整的 CSS 规则还是仅纯声明?
两者。粘贴完整规则(.container { display: flex; ... }) 选择器会自动删除,或单独粘贴以分号分隔的声明。
"JS 转 CSS" 产生什么?
单个 .selector { ... } 块,camelCase 键转换回 kebab-case。值按原样复制,因为工具无法知道纯数字应该具有什么单位。
为什么 styled-components 的输出看起来与其他格式不同? styled-components 的标记模板字面量接受真实 CSS 语法,所以该格式逐字保留您的原始属性名和值,而不是转换为 JS 对象。
它会验证我的 CSS 或 JavaScript 语法吗? 不会——这是一个轻量级解析器,不是完整的 CSS/JS 解析器。格式错误的输入以尽力方式解析;如果找不到有用的内容,输出会解释这一点而不是默默失败。
隐私
所有转换都在您的浏览器中本地进行。您粘贴的任何内容都不会被上传或存储。