CSS-in-JS本身不支持按需引入CSS文件，真正按需加载依赖打包器的code-splitting；import styled from 'styled-components'仅引入运行时库，并不自动触发样式按需加载，须配合React.lazy、异步组件封装及合理模块组织才能实现。
CSS-in-JS 本身不支持“按需引入 CSS 文件”，而是让样式随组件 JS 一起被构建工具拆分和加载——真正起作用的是打包器的 code-splitting，不是 import 语句本身。
为什么 import styled from 'styled-components' 不等于按需加载？
很多人误以为只要用了 styled-components，样式就自动“按需”了。其实不然：
- styled.button 定义的样式在组件首次渲染时才注入 DOM，但 JS 模块本身仍可能被打包进主 bundle；
- 如果组件没做懒加载（React.lazy / defineAsyncComponent），它的样式逻辑也会随入口 JS 一起加载；
- createGlobalStyle 或主题对象若分散在多个文件里，会被 Webpack/Vite 当作普通 import 处理，无法 tree-shake。
如何让 CSS-in-JS 真正“按需”？
关键不在写法，而在模块组织与加载时机：
- 把带
styled.xxx的组件单独封装成一个文件（如DashboardCard.tsx），并确保它只被异步加载路径引用 - 避免在根组件或 layout 中提前
import所有 styled 组件——否则它们的样式逻辑全进主 chunk - 用
React.lazy+Suspense加载页面级组件，其内部所有styled定义会随 JS chunk 一起被提取、压缩、延迟注入 - 全局样式必须收口到单一文件（如
src/theme/GlobalStyles.tsx），且只在顶层App中使用一次createGlobalStyle
动态主题切换时，CSS-in-JS 怎么避免冗余注入？
常见错误是每次切主题都重新调用 createGlobalStyle 或新建 styled 实例，导致旧样式残留：
- 主题变量应统一通过
ThemeProvider注入，组件内只用${props => props.theme.color}读取，不生成新类名 - 不要在
useEffect里反复创建styled.div—— 它会不断生成新 class（如css-abc123,css-def456） - 暗色模式等高频切换场景，推荐用 CSS 变量（
--bg-color）+className控制根元素类名，而非靠 styled-components 重绘整个样式树
最易被忽略的一点：服务端渲染（SSR）时，styled-components 的样式收集依赖于 ServerStyleSheet 实例生命周期。如果组件在 SSR 阶段被多次渲染（比如嵌套 React.lazy），样式可能漏收或重复注入——这不会在本地开发暴露，但上线后会导致 FOUC 或样式错乱。
立即学习“前端免费学习笔记（深入）”；
