React中style属性必须用驼峰命名，因JavaScript对象键名不支持短横线，故background-color需写为backgroundColor；所有CSS属性均按DOM API规则转驼峰，如font-size→fontSize、z-index→zIndex。
style 属性配合 JS 对象是 React 中最轻量、响应最快的动态样式方案，但它只适合控制「单次、离散、少量」的样式变更。用它做复杂布局或高频动画，反而会拖慢渲染、丢失伪类支持。
为什么 style 对象必须用驼峰命名
React 的 style 不是传字符串，而是传一个 JavaScript 对象，而 JavaScript 对象键名不能含短横线（-），所以 background-color 必须写成 backgroundColor；同理 font-size → fontSize，z-index → zIndex。
常见错误现象：Warning: Invalid value for prop `style` on <div> tag，往往就是用了连字符写法。
<ul>
<li>所有 CSS 属性名都按 DOM API 规则转驼峰，不是“首字母大写”而是“短横后字母大写”</li>
<li>数字值如 <code>fontSize: 16 会被 React 自动补 px，但 lineHeight: 1.5 或 opacity: 0.8 这类无单位的值必须保留小数点写法
margin: '0 auto' 这种多值字符串可以照常使用，React 不拆解它如何避免每次渲染都新建对象导致性能浪费
每次在 JSX 里写 style={{ opacity: isHovered ? 0.7 : 1 }}，都会创建新对象，触发 React 认为 style 引用变了，可能引发不必要的重绘（尤其在列表中）。
立即学习“前端免费学习笔记（深入）”；
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 把样式对象提到组件顶层或
useMemo里缓存：const baseStyle = useMemo(() => ({ opacity: isHovered ? 0.7 : 1 }), [isHovered]) - 纯静态样式（不依赖 state/props）直接定义为模块级常量，不放 render 函数内
- 不要在
style中调用函数（如style={{ transform: getTransform() }}），除非你明确控制了它的执行时机和缓存
哪些样式无法用 style 实现
style 只能设置内联样式，天然不支持：
- 伪类：比如
:hover、:focus、::before—— 想实现 hover 效果得靠onMouseEnter/onMouseLeave切换状态 - 媒体查询：
@media (max-width: 768px)完全不可用，响应式布局必须退回到className+ CSS 文件 - 选择器层级：无法通过
style控制子元素，例如父 div 的style不能让其内部span变红 - CSS 变量注入：虽然可以写
{ '--primary-color': themeColor }，但浏览器兼容性需自查，且无法被 CSS 预处理器处理
动态 class 与动态 style 该怎么选
别纠结“哪个更高级”，看场景：
- 要控制颜色、透明度、位移、缩放等「可数值化」且「低频变化」的样式 → 优先
style - 要切换整套视觉状态（如
disabled、loading、dark-mode）→ 用className+ CSS 类，语义清晰、复用性强、支持伪类 - 列表中某一项高亮 → 必须用唯一标识（如
id或index）比对，而不是布尔状态；style和className都能做，但后者更容易加过渡动画 - 需要服务端渲染（SSR）时注意：
style是运行时计算的，不会出现在初始 HTML 中；而 class 名是静态字符串，服务端可直出
真正容易被忽略的是：很多人把 style 当成“万能补丁”，结果在组件里堆了几十行样式对象，既难调试又难交接。其实只要超过 3 个属性、或涉及条件分支嵌套，就该考虑抽到 CSS Module 或 styled-component 里了。
