🔄 CSS转JS对象转换器

Updated: 2026-07-11

📄 输入CSS样式

📊 JS对象结果

关于CSS转JS对象转换器

CSS转JS对象转换器帮助前端开发者将CSS样式快速转换为JavaScript对象格式。在使用React、Vue等现代前端框架时,经常需要以内联样式对象的方式编写CSS。手动将CSS属性名从kebab-case转换为camelCase既耗时又容易遗漏。本工具自动完成转换,让您专注于开发。

适用场景

常见问题

CSS属性名如何转换为JS格式?

CSS属性名中的连字符(-)会被移除,并将后续字母转为大写(驼峰命名,camelCase)。例如:background-color → backgroundColor, font-size → fontSize, border-radius → borderRadius。这是一对一的直接转换,大部分的CSS-in-JS库都使用这种格式。少数特殊属性如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对象 — 适合直接在