CSS 转 JS 对象:把样式声明转成 React 内联 style 的完整做法

写 React 的人迟早会撞上这件事:手上有一段现成的 CSS,设计师给的也好,从 DevTools 里抠出来的也好,想塞进 <div style={{ ... }}>,却发现不能原样复制粘贴。React 的内联 style 不吃 CSS 字符串,它要的是一个 JavaScript 对象,而这个对象的写法跟 CSS 有几处关键差别。下面把这些差别一条条拆开。

为什么 React 内联 style 用对象,不用字符串

普通 HTML 的 style 属性是一段字符串,style="color: red; font-size: 14px"。React 不走这条路,它把内联样式定义成一个对象,key 是 DOM 的 IDL 属性名,value 是字符串或数字。这么设计有它的道理:对象能被 JavaScript 直接操作、合并、做条件判断,也能交给 TypeScript 的 CSSProperties 类型去校验。代价就是你不能把 CSS 文本直接丢进去,得先转一道。

属性名要转驼峰:background-color 变 backgroundColor

最常踩的一脚就在这里。CSS 用连字符,background-color、font-size、border-top-left-radius,而 React 的 style key 用驼峰。规则是:在每个连字符处切开,把后一个单词的首字母大写。

所以 background-color 变 backgroundColor,border-top-left-radius 变 borderTopLeftRadius。这一步偷不得懒。如果你直接把 key 写成 'background-color',React 会把它当成一个普通的自定义字符串 key,既不报错也不生效,样式就这么悄悄消失了。排查这种问题很费神,因为控制台一声不吭。

值该加引号还是裸数字

这是第二个分水岭。CSS 里所有值都是文本,但 React 对象里,值要么是带引号的字符串,要么是裸数字,而且选哪个不是随便的。

对长度类属性,React 会给裸数字自动补 px。所以 width: 100 渲染出来是 100px。已经带单位的值,像 14px 或 50%,必须保持带引号的字符串。而 React 视作无单位的那批属性,zIndex、lineHeight、opacity、flexGrow,惯例上写成裸数字。lineHeight: 1.5 是数字,写成 '1.5' 字符串虽然能跑,但通不过严格的类型期望。逐个属性对照着来,别一刀切。

厂商前缀和 CSS 变量的特例

带 -webkit-、-moz- 这类前缀的属性,React 有自己的规则:去掉开头的连字符,第一段首字母大写。-webkit-box-shadow 变 WebkitBoxShadow,-moz-user-select 变 MozUserSelect。

唯一的坑是微软前缀。别的前缀都首段大写,大家就顺手把 -ms-flex 写成 MsFlex,但 React 偏偏把 ms 保持小写,正确写法是 msFlex。大小写错一个字母,这条样式照样被丢掉,而且不报错。

CSS 自定义属性又是另一回事。--brand 这种保留开头的连字符,作为带引号的字符串 key,因为它不是合法的裸 JavaScript 标识符。--brand: #06e6d7 转成 '--brand': '#06e6d7',React 会把它原样透传到 DOM,你代码里 var(--brand) 的引用在运行时照常取到值。

一段真实的输入输出

把规则讲完,不如看一个例子。下面这段 CSS,假设是从设计稿里抠出来的卡片样式:

.card {
  background-color: #1a1a2e;
  padding: 16px;
  border-top-left-radius: 8px;
  line-height: 1.5;
  z-index: 10;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

转成 React style 对象后:

{
  backgroundColor: '#1a1a2e',
  padding: '16px',
  borderTopLeftRadius: '8px',
  lineHeight: 1.5,
  zIndex: 10,
  WebkitBoxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
}

注意几处:选择器和大括号被剥掉了,只留声明;六个连字符属性全转了驼峰;line-height 和 z-index 这两个无单位属性输出成裸数字 1.5 和 10,而带单位的 padding、border-top-left-radius 保持带引号字符串;-webkit-box-shadow 大写成 WebkitBoxShadow,里面那段 rgba(0, 0, 0, 0.3) 的逗号没把解析切坏。

批量转换交给工具

我自己一开始是手写转的,十来个属性一行行改,改到第三个组件就受不了了。最折磨的不是改驼峰,是那个微软前缀的小写特例,有次 msFlex 写成 MsFlex,布局塌了半天找不到原因,最后才发现样式根本没生效。后来就固定用 CSS 转 Style 对象 这个工具,整段粘进去,选择器自动剥离、驼峰自动转、前缀大小写按 React 规则内置好,还能一键复制带结果的链接。解析器对括号和字符串有感知,url(a;b) 里的分号、rgb(0, 0, 0) 里的逗号都不会切错,末尾的 !important 和注释也会清掉。

值里的 px 单位如果想顺手换算成 rem,可以配合 px 转 rem 换算器 一起用,把固定像素换成相对单位再填回对象里。两个工具都在浏览器本地运算,CSS 不上传也不记录,涉及保密的主题 token 用复制按钮就行,别走分享链接。

把 CSS 转 React style 对象这件事,说穿了就是三条规则:属性名转驼峰、无单位值用裸数字、厂商前缀按 React 的特例来。记不住没关系,常用的就那几个,真要批量处理时让工具替你盯着,比手写靠谱得多。

---

Made by Toolora · Updated 2026-06-13