React 的 style 属性不支持伪类和媒体查询，因其仅映射内联样式；需用 className 配合 CSS 类实现交互、响应式及伪元素效果，并注意性能与维护性问题。
style属性无法支持伪类和媒体查询
React 的 style 属性只映射到 DOM 元素的 element.style，这是内联样式的底层实现，天然不支持 :hover、::before、@media 等 CSS 规则。哪怕写成 style={{ ':hover': { color: 'red' } }}，浏览器也完全忽略——它根本不是合法的 JS 对象键名，更不是 CSS 解析器能识别的语法。
常见错误现象：Warning: Invalid value for prop `style` 或样式静默失效，尤其在尝试模拟悬停反馈或响应式断点时。
- 需要交互反馈（如按钮 hover 变色）→ 必须用
className配合真实 CSS 类 - 要适配移动端宽度 → 只能靠
@media写在 .css 或 .module.css 里 - 想加三角箭头（
::after）、下划线动画（text-decoration动画）→style无解
动态样式频繁更新时，style对象重建引发性能隐患
每次渲染都写 style={{ opacity: isShown ? 0.8 : 1, transform: `translateY(${offset}px)` }}，就会创建一个新对象。React 浅比较发现引用变了，即使实际值没变，也可能触发子组件重渲染（尤其在 React.memo 未合理配置时）。
这不是理论风险：列表项每项都带这种 style，滚动卡顿、CPU 占用飙升很常见。
立即学习“前端免费学习笔记（深入）”；
- 把静态部分抽成常量：
const baseStyle = { fontSize: 14, lineHeight: 1.5 }; - 动态部分用
useMemo缓存：const dynamicStyle = useMemo(() => ({ opacity, transform }), [opacity, transform]); - 但更彻底的解法是：用 class 切换控制状态，比如
className={isHovered ? styles.active : styles.normal}，CSS 负责具体表现
驼峰命名和单位自动补全容易出错
style 强制驼峰（backgroundColor）、数值单位自动补 px，看似省事，实则埋坑：
- 写
font-size: 16→ 报错，必须写fontSize: 16或fontSize: '16px' - 写
lineHeight: 2→ 合法（无单位倍数），但写成lineHeight: '2'就失效（字符串被当字面量解析） - 写
margin: '0 auto'可以，但margin: [0, 'auto']会报错——它不接受数组 - 想用
clamp(1rem, 2.5vw, 1.5rem)？只能写字符串：fontSize: 'clamp(1rem, 2.5vw, 1.5rem)'，失去类型提示和编辑器校验
什么时候该果断放弃style，切回CSS类
判断很简单：只要出现以下任一情况，就该停手，建个 .module.css 文件。
- 样式块超过 5 行，或包含多个相关属性（如 flex 布局 + gap + align-items）
- 需要和兄弟元素对齐、继承父级颜色/字体，而不仅仅是自身状态驱动
- 设计稿里这个 UI 元素未来大概率复用（按钮、卡片、表单控件）
- 团队协作中别人要改这个样式——没人想翻 JSX 找 style 对象再猜逻辑
最常被忽略的一点：CSS 类可以被浏览器 DevTools 实时编辑、热重载生效；而 style 对象改了得等 React 重新计算并 patch DOM，调试节奏慢半拍。
