styled-components 中 props 控制样式需在模板字符串函数内显式访问，如 props.color 或解构；避免冗余写法和未读取 props 导致失效；支持基础类型，注意引用变化触发重计算；theme 需通过第二参数获取，与 props 分离使用。
styled-components 怎么用 props 控制样式
直接传 props 进 styled 组件函数里就行，styled.div、styled.button 这些工厂函数接收的模板字符串函数，第一个参数就是组件接收到的 props 对象。别写成 props => props.color 这种冗余形式，直接解构或点取更清晰。
常见错误是把 props 当作普通 React 组件的属性去“传递”，比如写 <MyButton color="red" /> 却没在 styled.button 的样式逻辑里读它——那 props 就只是挂载了，完全没生效。
- 样式函数里必须显式访问
props.xxx（或解构），否则不会触发重计算 - 支持所有基础类型：字符串、布尔值、数字、甚至函数（但不推荐）
- 注意：props 变化时，styled-components 会重新执行样式函数并比对 CSS 字符串，不是靠 class 切换
颜色/尺寸这类基础样式怎么根据 props 动态切换
用三元或逻辑运算最直白。比如按钮背景色随 variant 变：
const Button = styled.button`
background: ${props => props.variant === 'primary' ? '#007bff' : '#6c757d'};
padding: ${props => props.size === 'large' ? '12px 24px' : '8px 16px'};
`;
别硬套 CSS 变量或 calc() 做动态计算——除非真有运行时像素级需求，否则纯 JS 计算更可控、调试更方便。
立即学习“前端免费学习笔记（深入）”；
- 避免在样式函数里调用复杂函数或读全局状态，这会让样式不可预测
- 布尔 props（如
disabled）适合用逻辑与：${props => props.disabled && 'opacity: 0.5; cursor: not-allowed;'} - 数值类 props（如
margin）记得加单位，${props => props.margin}px比${props => props.margin}安全
为什么 props 改了，样式没更新
大概率是 props 没真正变，或者变了但没触发重渲染。styled-components 依赖 props 引用变化来决定是否重生成 CSS 规则。
- 父组件用了
React.memo且 props 浅比较没过，子组件根本收不到新 props - 传了对象或数组作为 props（比如
styleConfig={{ color: 'red' }}），每次 render 都是新引用，导致样式函数反复执行、CSS 类名爆炸 - 在样式函数里读了闭包变量（比如从父作用域抓了个
theme），而不是从入参props里取，那就跟 props 无关了
验证方法：在样式函数里加 console.log(props)，看输出是否随预期变化。
主题（theme）和 props 混用时要注意什么
theme 是通过 ThemeProvider 注入的全局配置，和组件自身 props 是两层东西。不能指望 props.theme 自动存在——得显式从第二个参数读：styled.div((props, theme) => ...)。
- 优先用 props 控制组件级差异（如
size、variant），用 theme 管理跨组件一致的值（如theme.colors.primary） - 别在样式函数里修改 theme 对象，它应该是只读的
- 如果某个 prop 实际是 theme 的 alias（比如
color="primary"对应theme.colors.primary），就老老实实做一次映射，别省那行代码
最常被忽略的是：theme 更新时，所有用到它的 styled 组件都会重计算样式——哪怕它们的 props 没变。这点在深色模式切换时特别明显。
