📄 输入CSS样式
📊 JS对象结果
关于CSS转JS对象转换器
CSS转JS对象转换器帮助前端开发者将CSS样式快速转换为JavaScript对象格式。在使用React、Vue等现代前端框架时，经常需要以内联样式对象的方式编写CSS。手动将CSS属性名从kebab-case转换为camelCase既耗时又容易遗漏。本工具自动完成转换，让您专注于开发。
适用场景
- React组件中的style属性：<div style={...}>
- Styled Components库中的样式对象
- CSS-in-JS方案（如Emotion、JSS）的样式定义
- JavaScript动态样式的生成
- 从CSS迁移到CSS-in-JS方案时的批量转换
常见问题
CSS属性名如何转换为JS格式？
CSS属性名中的连字符（-）会被移除，并将后续字母转为大写（驼峰命名，camelCase）。例如：background-color → backgroundColor, font-size → fontSize, border-radius → borderRadius。少数特殊属性如float→cssFloat也正确转换。
CSS值也会转换吗？
CSS值原样保留，不进行转换。font-size: 16px转换为fontSize: '16px'，margin: 10px 20px转换为margin: '10px 20px'。数值类型的值（如无单位的数字）会保留为数字类型：line-height: 1.5转换为lineHeight: 1.5。
输出格式有哪些选项？
支持三种输出格式：1)标准React样式对象（JS对象）— 适合React组件的style属性；2)CSS-in-JS模板字面量（styled-components格式）— 适合Styled Components库；3)内联JavaScript对象 — 适合直接在script中使用。
支持批量转换吗？
支持。您可以一次性粘贴多行CSS样式，工具会自动解析每条CSS声明并进行转换。批量转换时会保持原有的换行和缩进结构，输出格式中的每个属性都独立一行，方便查看和编辑。
转换结果可以直接在React组件中使用吗？
可以。直接将输出的JS对象赋值给React元素的style属性即可。转换结果已经处理好驼峰命名和引号包裹，无需额外修改。如果使用TypeScript，类型推断也会正常工作。