动态样式必须用函数返回CSS字符串，因插值求值发生在渲染时；theme需ThemeProvider注入，否则props.theme为undefined；多变体应提取共用样式+条件覆盖；SSR需确保class名一致避免闪动。
动态样式依赖 props 时，必须用函数返回 CSS 字符串
Styled Components 不支持直接在模板字符串里写 if 或三元表达式，比如 color: ${props => props.primary ? 'blue' : 'gray'} 是合法的，但 color: ${props.primary ? 'blue' : 'gray'}（没包函数）会报错或失效——因为此时插值求值发生在组件创建时，而非渲染时。
常见错误是把逻辑写在外部变量里再传入，结果样式不响应 props 变化。正确做法始终是把整个插值写成函数：
const Button = styled.button`
background: ${props => props.primary ? '#007bff' : '#6c757d'};
color: ${props => props.inverted ? '#fff' : '#000'};
`;
- 函数体里可调用任何 JS 逻辑，包括对象查找、计算、甚至调用工具函数
- 避免在函数里做 heavy computation，它会在每次 render 被执行
- 如果逻辑复杂，建议提前在组件内计算好一个状态变量，再传给 styled 组件
主题（theme）未注入时，props.theme 会是 undefined
很多人写了 color: ${props => props.theme.colors.text} 却发现报错，根本原因是没用 ThemeProvider 包裹组件树。Styled Components 的 theme 不是全局自动可用的，必须显式提供。
典型错误场景：在 Storybook 或测试环境里忘了加 ThemeProvider，导致所有 props.theme 访问失败。
立即学习“前端免费学习笔记（深入）”；
- 确保根组件或测试入口处包裹了
<ThemeProvider theme={myTheme}>...</ThemeProvider> - theme 对象可以是任意结构，但推荐用扁平键名（如
colors.primary），避免深层嵌套引发undefined链式访问错误 - 开发时可在 styled 函数外加一层防御：
color: ${props => props.theme?.colors?.text || '#333'};
动态生成多个变体时，别重复写整套样式
为按钮写 primary、secondary、danger 等变体，如果每个都复制粘贴整段 CSS 再改几行，维护成本会指数上升。更稳妥的方式是提取共用部分 + 条件覆盖。
例如背景色、边框、padding 大部分一致，只变 color 和 border-color，那就把基础样式写死，动态部分只覆盖关键属性：
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
border: 1px solid transparent;
font-weight: 500;
${props =>
props.variant === 'primary'
? `
background: #007bff;
color: white;
border-color: #007bff;
`
: props.variant === 'outline'
? `
background: transparent;
color: #007bff;
border-color: #007bff;
`
: `
background: #f8f9fa;
color: #333;
border-color: #dee2e6;
`}
`;
- 每个分支返回的是 CSS 片段，不是完整规则块；拼接后整体仍是一个有效样式块
- 不要在分支里重复写
padding或border-radius，否则易漏同步 - 如果变体超过 4–5 种，建议转用
css辅助函数 + 对象映射，提升可读性
服务端渲染（SSR）下，class 名不一致会导致样式丢失
Next.js 或 Express + ReactDOMServer 场景中，若客户端 hydrate 后 class 名和服务器生成的不匹配，浏览器会丢弃原有样式并重新插入新 class —— 表现为页面闪动或样式错乱。
根本原因通常是多个 StyleSheetManager 实例或未共享样式缓存。最常见诱因是：在自定义 _document.tsx 中重复初始化 Styled Components，或在非顶层位置用了 StyleSheetManager。
- Next.js 用户务必按官方推荐方式配置：只在
_app.tsx用一次StyleSheetManager，且disableVendorPrefixes等选项两端保持一致 - 检查构建产物中是否出现多份
data-styled属性，有则说明样式收集被隔离了 - 升级到 v6+ 后，
styled-components默认启用自动 class 名哈希，但需确保babel-plugin-styled-components的ssr选项开启
动态 CSS 的灵活性来自运行时插值，但也意味着每处 ${} 都是潜在的性能与兼容性支点。最容易被忽略的不是语法怎么写，而是「这个插值函数在什么时机执行」「它的闭包里捕获了哪些变量」「服务端和客户端是否看到同一份 theme」——这些细节不验证，上线后才暴露问题。
