CSS 到 JS 样式转换器
将 CSS 声明转换为 React 内联样式对象、React Native StyleSheet 或 styled-components/Emotion css 模板字面量 — 以及将 JS 样式对象转换回纯 CSS。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-style-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"conversionDirection": "css-to-js",
"outputFormat": "react-inline",
"cssInput": "background-color: #3b82f6;\nfont-size: 16px;\nopac…"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-to-js-style-converter` tool (CSS to JS Style Converter) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-to-js-style-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 声明块，您将获得一个可立即使用的 JavaScript 样式对象 — 或反向操作，将 JS 样式对象转换回纯 CSS。此工具针对 CSS 在现代 JavaScript UI 代码中出现的三种方式，每种方式对属性名称和值有不同的规则：
- React 内联样式 — 带有 camelCase 键（
backgroundColor、fontSize）的普通对象，用于style属性。数值像素值被转换为裸数字，其中 React 自动追加px（fontSize: 16），而opacity和fontWeight等无单位属性保持数值，因为 CSS 本身将它们视为无单位。 - React Native StyleSheet — 相同的 camelCase 转换，包装在
StyleSheet.create({ container: { ... } })中。布局属性（width、margin、padding、borderRadius、fontSize等）会去掉px后缀，因为按惯例 React Native 的测量值是无单位的数字。 - styled-components / Emotion — 标记的模板字面量（
const styles = css`...`;）。与其他两种格式不同，属性名称保持原始的 kebab-case 格式，值逐字复制 — styled-components 和 Emotion 在模板字面量内解析真实的 CSS 语法，因此这里不会发生 camelCase 转换或数值强制。
将转换方向切换到 JavaScript → CSS 会反向操作：粘贴一个 JS 样式对象（引号或不引号的键，字符串或数值值），您将获得标准的 property: value; CSS 行。数值会重新展开为像素，除非属性是无单位属性之一（opacity、zIndex、flex、lineHeight 等），这些属性会作为普通数字写回。
如何使用
- 选择转换方向 — CSS → JavaScript 或 JavaScript → CSS。
- 对于 CSS → JavaScript，选择输出格式：React 内联样式、React Native StyleSheet 或 styled-components/Emotion。
- 将您的 CSS 声明（或 JS 样式对象）粘贴到输入框中，可以是松散的
property: value;行或包装在selector { ... }块中。 - 在您输入时输出会自动更新。
常见问题
为什么 font-size: 16px 在 React 中变成 fontSize: 16，但在 styled-components 中仍然是 font-size: 16px？
React 的内联 style 属性将大多数属性的裸数字视为像素，所以工具会移除 px。styled-components 和 Emotion 呈现字面 CSS 文本，所以单位必须保留。
React Native 中哪些属性保留其 px？
只有 React Native 期望数字的属性：尺寸、间距（margin*、padding*）、位置偏移、边框宽度/半径、fontSize、letterSpacing 和间隙属性。其他一切都被引用为字符串。
它处理供应商前缀属性吗？
是的 — -webkit-、-moz-、-ms- 和 -o- 前缀转换为它们的 JS 等效项（WebkitTransform、MozTransform、msTransform、OTransform）并反向转换。
它理解完整的 CSS 选择器或嵌套规则吗？
不 — 它只读取声明，无论是松散输入还是包装在单个 { ... } 块中。选择器、媒体查询和嵌套规则不被解析。
CSS 自定义属性（--my-var）会发生什么？
定义自定义属性的声明（以 -- 开头）在 CSS → JS 方向中被跳过；使用 var(--my-var) 作为值时会原样保留。
隐私
此工具完全在您的浏览器中运行 — 您的 CSS 和 JavaScript 永远不会离开您的设备或触及服务器。