styled-components 不会重复注入 css，class 名相同说明缓存生效；重复现象主因是 props 插值不稳定、组件定义位置错误或传入非基础类型。
styled-components 本身不会生成重复的 CSS 规则——它靠哈希缓存保证相同样式字符串只注入一次。但你看到“重复”，大概率是 props 变化导致插值返回不同字符串，或组件被多次定义，而非 CSS 冗余本身。
为什么 className 不变但样式看起来“重复”？
这是最常见的误判：你打开 DevTools 看到多个元素用了同一个 class 名（比如 sc-fzplWN），就以为 CSS 被重复注入。其实不是。styled-components 对「完全相同的模板字符串 + 相同 props 插值结果」会复用同一份 CSS 规则，class 名相同恰恰说明没重复。
- 真正的问题常出在插值里用了非稳定值：比如
${props => Math.random()}或${props => new Date().toISOString()}，每次渲染都返回新字符串，强制生成新 class 和新 CSS 规则 - 对象引用没变但内容变了（如传入一个未 memoized 的
styleConfig对象），插值函数内部又做了深比较或 JSON.stringify，也会触发误判 - 组件定义写在 render 函数里（如函数组件内直接写
const Button = styled.button`...`），每次渲染都新建组件构造器，破坏缓存
避免 props 插值导致样式规则爆炸
动态样式必须可控。插值函数不是“随便写 JS 的地方”，它是样式计算的临界点。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 只接受基础类型：确保传给
styled组件的props是string、number、boolean，别直接传object或function - 提前计算：复杂逻辑（如颜色推导、尺寸映射）放在组件内用
useMemo处理，再把最终值（如bgColor、fontSize）透传下去 - 默认值兜底：用解构默认值防止
undefined导致空字符串或NaN，例如${({ size = 'medium' }) => sizeMap[size]} - 布尔 props 显式转义：写
opacity: ${props => props.disabled ? 0.5 : 1}，而不是opacity: ${props => props.disabled}
组件定义位置和复用方式影响缓存效果
缓存生效的前提是组件构造器实例不变。一旦构造器变了，所有关联样式都会重新计算。
- 永远把
styled.xxx定义写在模块顶层，不要放进函数组件、循环或条件分支里 - 需要变体时用扩展（
const BigButton = StyledButton.extend`font-size: 20px;`）或工厂函数（const createButton = (baseStyle) => styled.button`${baseStyle}`），而不是每次 render 都 new 一个 - 如果要用 theme，统一通过
theme参数取值，别自己从 context 读 —— 否则 theme 更新时插值函数可能收不到新值 - 高频更新的 props（如
scrollY、mouseX）不适合进styled，该用style属性或emotion的动画 API
真正难的不是“怎么写不重复”，而是判断哪些变化该由 styled 承担、哪些该交给运行时 style 或独立 CSS 类。插值函数的边界感，比语法更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
