styled-components动态样式需在模板字符串中直接用${props => …}插值，theme须通过themeprovider注入，styled组件必须定义在模块顶层以防重复类名，混用css modules时优先级取决于css特异性与加载顺序。
styled-components怎么写一个带props的动态样式
直接在模板字符串里用函数插值，props 会自动传进来。别写成箭头函数套一层再返回样式——那样 styled-components 拿不到 props。
- 正确写法：
const Button = styled.button`color: ${props => props.primary ? 'blue' : 'gray'};` - 错误写法：
const Button = styled.button(() => `${props => props.primary ? 'blue' : 'gray'}`)（语法错，且 props 不会透传） - 注意：插值表达式里不能用
if语句，只能用三元、逻辑运算或提前提取函数 - 如果逻辑复杂，建议抽成独立函数，比如
const getColor = (props) => props.theme === 'dark' ? '#fff' : '#000'，再在模板里调${getColor}
主题（theme）怎么传进styled-components
ThemeProvider 是唯一合法入口，没它，props.theme 就是 undefined。常见错误是只装了包、写了 styled.div`color: ${props => props.theme.color};`，但忘了包住整个应用。
- 必须在根组件外层包裹：
<themeprovider theme="{myTheme}"><app></app></themeprovider> -
myTheme必须是 plain Object，不能是map或带 getter 的对象（SSR 时会序列化失败） - 主题更新时，所有用到
props.theme的组件都会重渲染——不是性能问题，是设计使然；别试图“局部冻结”theme - 不推荐在 theme 里放函数（比如
theme.toPx = (n) => `${n}px`），因为 SSR 时 jsON 序列化会丢掉
如何避免CSS-in-JS导致的重复类名和样式冗余
styled-components 默认按组件实例生成唯一 class，但如果你在 render 里动态创建 styled 组件（比如 const Box = styled.div`${dynamicStyle}`），每次渲染都产生新组件，等于不断挂新 class，内存和样式表都会涨。
- 永远把
styled.xxx定义提至模块顶层，不要放在函数组件内部或条件分支里 - 需要动态变体？用 props 控制，而不是拼新组件：
const Card = styled.div`border: ${props => props.rounded ? '4px' : '0'};` - 大量相似变体时，考虑用
attrs预设 props：const PrimaryButton = Button.attrs({ primary: true }) - 服务端渲染时，重复定义还会导致 class 名不一致（hydration mismatch），React 直接报错
Prop `className` did not match
styled-components和CSS Modules混用时class优先级怎么算
优先级只看 CSS specificity 和加载顺序，跟“谁是 JS 生成的”无关。但实际中，styled-components 的 style 标签默认插入在 最末尾，天然比大部分 CSS Modules 的 link 标签靠后，所以通常会覆盖前者。
立即学习“前端免费学习笔记（深入）”；
- 别依赖“JS 生成就一定高优先级”，手动调整
<link>位置或加!important是危险信号 - 如果用了 CSS Modules 的
:global，它会脱离模块作用域，可能意外被 styled 组件的规则命中 - 调试时打开 DevTools，看 computed styles 里哪条 rule 被 strike-through，再点开对应 source，才能确认真实覆盖链
- 最稳的方式是避免混用——要么全用 styled-components 做视觉层，要么让 CSS Modules 处理布局/重置，styled-components 只管交互态
真正难的不是写对语法，而是想清楚哪些样式该进 JS、哪些该留在纯 CSS 里。比如动画关键帧、字体定义、全局重置，硬塞进 styled-components 只会让 bundle 变重、调试变慢、协作变难。