styled-components的核心优势是解决组件级样式隔离与状态驱动样式问题，通过运行时生成唯一类名实现样式局部化，支持props插值、伪类嵌套，但带来运行时开销、调试困难及打包体积增加。
React中用 styled-components 引入 CSS，核心优势不是“更酷”或“更现代”，而是解决组件级样式隔离和状态驱动样式的实际痛点——它让样式真正属于组件，而不是全局拼凑出来的副作用。
为什么 import './Button.css' 会出问题
传统 CSS 引入本质是副作用：Webpack 把整个文件塞进 ，不管你在哪个组件里 import，.button 就是全局生效。多个组件都定义 .button？后加载的覆盖前一个；Header.js 里写个 <div class="button">，照样被匹配到。热更新时旧规则不卸载，容易残留；哪怕组件没渲染，CSS 也已注入 DOM。
<h3>
<code>styled.button 怎么做到样式不泄漏
它不往 插 CSS，而是运行时动态生成唯一类名（比如 sc-a1b2c3），再绑定到对应元素上。每个 styled.xxx 调用都创建新组件，样式只对该组件实例生效。
- 伪类（
:hover）、媒体查询、嵌套直接写在模板字符串里，不用额外配置 - 支持
props插值：background: ${props => props.primary ? '#007bff' : '#6c757d'}，不用拼className - 服务端渲染必须用
ServerStyleSheet或 Next.js 的use client+createGlobalStyle，否则首屏无样式
运行时开销和调试成本在哪
每次组件渲染，styled.button 都会重新执行模板字符串解析、CSS 注入、class 名生成——这不是静态编译，而是 JS 运行时行为。
立即学习“前端免费学习笔记（深入）”；
- 打包体积多出约 14KB gzip（对比纯 CSS Modules）
- 调试时看到的是
sc-a1b2c3这类哈希名，不是语义化类名，得靠 React DevTools 查 props -
cssprop 需要 Babel 插件支持，否则 TypeScript 会报错
真实项目里没人只用一种方案：基础按钮、表单控件这类低交互组件，用 Button.module.css 更轻量；而需要主题切换、复杂状态机（如 Tooltip、ThemeSwitcher）才值得上 styled.div。混用时，CSS Modules 文件里不能 @import 非 .module.css 文件，createGlobalStyle 必须确保只执行一次——重复调用会导致样式重复注入。
