CSS-in-JS是刚需而非潮流，因其解决命名冲突、状态耦合、跨包复用失效三大硬伤；它通过组件+props生成稳定哈希类名、支持动态样式计算、绑定生命周期实现真正样式隔离。
不是“更受欢迎”，而是它在组件化开发中解决了几个传统CSS无法绕开的硬伤：命名冲突、状态耦合、跨包复用失效。如果你的项目里用了多个UI库，或需要频繁响应props切换样式，那CSS-in-JS不是选项，是刚需。
组件内样式被Ant Design/MUI覆盖怎么办
传统CSS（含CSS Modules）靠文件路径或类名哈希生成类名，但SSR时服务端与客户端哈希不一致、跨包引用时路径解析不同，都会导致.btn撞车。Ant Design的.ant-btn和你写的.btn在DOM里并存，权重相同就按加载顺序决胜负——这在上线后真会出样式错乱。
CSS-in-JS（如styled-components或@emotion/react）不依赖路径，而是基于组件定义+props结构生成稳定哈希（如sc-bdVaJa或css-1x2a3cd），同一组件多次渲染类名完全一致，且服务端/客户端可对齐（需开启@emotion/babel-plugin）。
- 同名但不同组件定义 → 类名不同
- 相同组件多次渲染 → 类名相同，利于
标签复用 - Portal挂载到
document.body时，必须显式透传theme或用useTheme，否则样式断连
error/disabled/size/variant组合爆炸怎么写
一个Input有4个布尔/枚举prop，16种视觉状态。传统写法只能堆className字符串：{`${base} ${error ? 'error' : ''} ${disabled ? 'disabled' : ''}`}——难读、难测、主题切换要重写整套class名。
styled.input直接支持JS表达式：border: 1px solid ${props => props.error ? '#f33' : '#ccc'};所有计算在render阶段完成，结果会被缓存（emotion的css函数传对象还能避免重复计算）。
- 变量、三元、函数调用、
import共享色值常量，全都能用 - 不是“把CSS写进JS”，是让样式声明获得JS的表达力
- 避免在
useEffect或事件回调里调用css，否则绕过序列化优化路径
为什么BEM/CSS Modules仍会漏掉样式污染
BEM只是命名规范，.header__title照样会被另一个同名类覆盖；CSS Modules对body、button:focus这类全局/伪类选择器完全无效。比如你在组件里写了body { background: #f0f }，卸载后样式还在。
CSS-in-JS把样式注入逻辑绑定到组件生命周期：每个styled.button只作用于该组件实例的DOM节点，动态样式（如color: ${props.active ? 'red' : 'gray'}）在JS层算完直接映射为内联class，不经过CSS文件解析流程。
- 滥用
createGlobalStyle且不限制范围（如写div { margin: 0 }而非.my-app div）= 主动放弃隔离 - 在根文件（如
index.js）里写const GlobalStyle = css`body { }`，和引入global.css没区别 - 未正确包裹
CacheProvider（Emotion）或StyleSheetManager（styled-components），客户端会注入重复标签
真正决定落地效果的，从来不是“用了CSS-in-JS”，而是你有没有约束动态逻辑范围、是否统一cache实例、是否让Babel插件提前处理静态部分——这些细节，比选库本身更影响稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
