styled-components通过props插值控制样式，需确保返回字符串、处理undefined、避免复杂逻辑；布尔props须显式转css值；慎用非纯函数以防重渲染；theme与props应分层使用，命名需一致。
styled-components怎么用props控制颜色和尺寸
直接在模板字符串里插值就行，但要注意插值表达式必须返回字符串，不能是对象或 undefined。常见错误是忘记加 props => 箭头函数，或者在插值里用了未定义的 props 属性。
- 基础写法：
const Button = styled.button`background: ${props => props.primary ? '#007bff' : '#6c757d'};` - 尺寸控制同理：
font-size: ${props => props.size === 'large' ? '18px' : '14px'}; - 如果 props 可能为 undefined，建议加默认值：
${props => props.disabled ? 'opacity: 0.5;' : ''} - 别在插值里写复杂逻辑，提取成独立函数更易测、可复用
为什么传入布尔值时样式不生效
因为 styled-components 不会自动把布尔 props 转成 CSS 属性，它只是透传给插值函数——你得自己判断并返回有效 CSS 字符串。典型现象是写了 disabled={true}，但组件没变灰，检查控制台也无报错，问题就出在插值没覆盖该分支。
- 错误示范：
opacity: ${props => props.disabled};→ 返回true，不是合法 CSS 值 - 正确写法：
opacity: ${props => props.disabled ? 0.5 : 1}; - 也可以用解构默认值避免 undefined：
const Box = styled.div`width: ${({ w = 'auto' }) => w};` - 注意：布尔属性名如
primary、small在 JSX 中写成primary即表示true，不用写primary={true}
如何避免重复计算和样式抖动
每次渲染都会重新执行插值函数，如果里面做了 heavy 运算（比如深 clone、正则匹配、大量数组操作），会拖慢渲染。更隐蔽的问题是：相同 props 下返回不同字符串（比如用了 Math.random() 或 new Date()），会导致 styled-components 认为样式变了，强制重生成 class 名，触发 DOM 重排。
- 禁止在插值中调用非纯函数；所有计算应提前在组件内完成，只传最终值进 styled 组件
- 需要响应 theme 变化？用
useTheme()+styled的theme参数，别自己从 context 拿 - 高频更新的 props（如鼠标位置、滚动偏移）不适合直接进 styled，改用
style属性或 CSS-in-JS 库的动画专用 API - 可以用
shouldForwardProp过滤掉非 CSS 相关 props，减少干扰：const Input = styled.input.withConfig({ shouldForwardProp: (prop) => !['error', 'success'].includes(prop) })`...`;
theme 和 props 混合使用的实际写法
theme 提供全局设计变量（如主色、断点），props 控制实例化状态（如 active、loading），两者要分层使用，别全堆在一个插值里。否则主题切换时，props 插值可能因闭包捕获旧 theme 值而失效。
- 推荐结构：
color: ${props => props.theme.colors[props.variant] || props.theme.colors.default}; - 断点响应式写法：
@media (min-width: ${props => props.theme.breakpoints.md}) { font-size: 16px; } - 不要这样写：
background: ${props => props.theme.primaryColor && props.active ? props.theme.primaryColor : '#ccc'};—— 把逻辑耦合太紧，难维护 - 复杂主题适配建议封装成工具函数：
const getBg = ({ variant, theme, disabled }) => disabled ? theme.grey[300] : theme.variants[variant]?.bg;，再在 styled 中调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
