Loading...
Loading...
粘贴 CSS,在浏览器本地得到 JavaScript 样式对象。
React 内联样式、styled-components、emotion 都要 CSS 写成属性驼峰的 JavaScript 对象,而不是 CSS 字符串。手动翻译又烦又容易错,这个工具帮你瞬间完成。
粘贴一段 CSS 声明,或带选择器的完整规则。工具会把每个属性驼峰化、把 CSS 自定义属性保留为带引号的键、按 React 的方式处理 -webkit- 和 -ms- 前缀、去掉 !important,输出一个干净的对象。纯声明块变成一个 style 对象;带选择器的规则变成按选择器分组的 styles 映射。一切都在浏览器里运行。
font-size 变 fontSize、background-color 变 backgroundColor,以此类推。
--accent 这类自定义属性保留为带引号的键,保持合法。
-webkit-transform 变 WebkitTransform,-ms- 前缀用 React 要的小写 ms 形式。
纯声明块变成一个对象;带选择器的规则变成 styles 映射。
注释和 !important 会被去掉,输出可直接用。
在浏览器里随打随解析,不上传。
只针对单个元素时,只粘声明(不带选择器),就能得到可直接放进 style={...} 的对象。
把 CSS 粘到左边面板。
JS 样式对象会出现在右边。
复制进你的组件或 styled 定义。
如愿意,可把 styles 映射的键改成合法标识符。
把 CSS 片段变成 style={...} 用的样式对象。
几秒把现有 CSS 搬进 JS 对象写法。
把一段规则转成 CSS-in-JS 的 styles 映射。
看清楚每个属性名是怎么转换的。
工具先去掉注释,判断输入是否含规则块,把声明解析成属性/值对,在处理厂商前缀和 CSS 变量的前提下把键驼峰化,再序列化成 JavaScript 对象。
所有解析都在本地完成,CSS 不会发往任何服务器。
一次正则解析加一次键转换,所以对象随打随更新。