React 的 inline style 必须是 JavaScript 对象而非字符串，以防范 XSS、统一 DOM 操作并匹配原生 element.style 行为；属性名需 camelCase（如 backgroundColor），值为字符串或数字，且不支持伪类、媒体查询等 CSS 高级特性。
React 中的 inline style 必须是 JavaScript 对象，且属性名用 camelCase，不能写 CSS 字符串或带连字符的 key。
为什么 style 必须是对象，而不是字符串？
React 的 style 属性不接受 CSS 字符串（比如 "color: red; font-size: 14px;"），它只接收一个键值对对象。这是为了规避 XSS 风险、统一 DOM 操作路径，并与原生 element.style 行为对齐。
常见错误现象：Warning: The `style` prop expects a mapping from style properties to values, not a string.
- 写成字符串会直接报 Warning，样式也不生效
- 所有属性名必须是 camelCase：例如
backgroundColor而不是background-color - 值通常是字符串或数字（如
fontSize: 14会被自动加px，但lineHeight: '1.5'就必须带单位）
如何正确声明和复用 inline style 对象？
可以把样式对象定义为常量或计算所得，避免在 render 中重复创建（影响性能）。
立即学习“前端免费学习笔记（深入）”；
示例：
const buttonStyle = {
backgroundColor: '#007bff',
color: 'white',
border: 'none',
padding: '8px 16px',
borderRadius: '4px',
cursor: 'pointer'
};
function MyButton() {
return <button style={buttonStyle}>Click me</button>;
}
- 不要在 JSX 中内联写大对象：
<div style={{ fontSize: '16px', color: 'red' }}>可以，但逻辑复杂时建议抽离 - 动态样式优先用变量拼接，而非模板字符串：
color: isDisabled ? '#999' : '#000' - 避免在
render或函数组件 body 内直接const style = {...}——每次渲染都新建对象，可能触发不必要的子组件重渲染
哪些 CSS 属性不支持或需特殊处理？
大部分标准 CSS 属性都支持，但有几类要注意：
-
display: 'flex'可用，但flexDirection: 'row'这种写法无效——inline style 只认标准 CSS 属性名，不识别 Flexbox 的“别名” - 伪类（
:hover）、媒体查询（@media）、动画关键帧无法通过style实现，必须用<style>标签或 CSS-in-JS 库 - 某些属性值需要字符串化单位：
width: 200→ 自动转'200px'，但width: '200rem'或width: 'max-content'必须显式写字符串 -
zIndex是合法的（注意是 camelCase），但z-index会报错
什么时候不该用 inline style？
不是所有场景都适合 inline style。它适合简单、动态、组件级隔离的样式；但遇到以下情况，就该换方案：
- 需要:hover/:focus 等交互状态样式
- 要复用同一套样式到多个组件（维护成本陡增）
- 样式含大量嵌套、媒体查询或复杂选择器
- 团队已有 CSS Modules / Tailwind / styled-components 规范
最常被忽略的一点：inline style 无法继承父级 font-family 等属性的 cascade 行为——它只作用于当前元素，且优先级高于外部 CSS 类，容易意外覆盖设计系统基础样式。
