如何利用CSS-in-JS库根据组件State动态更新复杂CSS样式

可行但需避免在 styled 中调用 Hook，因 styled 执行时组件未挂载；state 应在组件内计算后通过 props 传入，复杂逻辑用 useMemo 提前收口，样式片段用数组合并，引用需稳定缓存。

直接用组件 state 控制 CSS-in-JS 样式是可行的，但必须绕过「在 styled 函数里调用 Hook」这个致命错误——styled 执行时组件还没挂载，useState 或 useTheme 会立刻报 Invalid hook call。

为什么不能在 styled 模板字符串里读取 useState 的值

因为 styled.button 是一个工厂函数，它只运行一次（模块初始化时），返回的是一个 React 组件类型，不是渲染函数。你写的 ${props => props.color} 中的 props 来自组件调用时传入，不是来自 useState 的返回值。

• 常见翻车写法：const Button = styled.button`${() => { const [c] = useState('red'); return `color: ${c}`; }}` → 报错
• 正确路径只有一条：state 在组件内算好，再作为 prop 透传给 styled 组件
• 伪类、媒体查询、主题变量都得走同一套逻辑，不能“半途介入”

复杂样式怎么拆解才不卡顿

所谓“复杂”，往往指多条件组合（如 size + variant + isDisabled + theme.mode）、带单位计算（rem 转换）、或依赖外部状态（如全局 loading 状态）。这类逻辑绝不塞进样式函数体。

• 把组合判断提前收口：例如 const btnClass = useMemo(() => getButtonClass({ size, variant, isDisabled, theme }), [size, variant, isDisabled, theme])
• 数值单位统一由组件层处理：margin: ${spacingMap[props.spacing]}px，而不是 margin: ${props.spacing}rem（rem 需要根字体尺寸，易出错）
• 避免在样式函数里做对象深比较或数组遍历，浅比较失败会强制重生成 class，触发样式刷新抖动

如何让多个动态样式片段协同生效

单个 styled 组件支持同时消费多个样式来源，但拼接方式影响可维护性与性能。

立即学习“前端免费学习笔记（深入）”；

• 推荐写法：const Comp = styled.div(props => [baseStyle, props.isActive && activeStyle, props.theme.dark && darkModeStyle]) —— css 返回的是对象或模板字符串，数组会被 emotion/styled-components 合并为一个 class
• 不推荐嵌套对象写法：css({ '&:hover': { color: 'red' } }) 比 css`&:hover { color: red; }` 多一层解析，简单交互场景没必要
• 如果某段样式需复用（比如所有 loading 状态的 opacity 动画），抽成独立 css 常量，别重复写三遍

真正容易被忽略的点是引用稳定性：哪怕你把 state 提前算好了，如果每次渲染都传一个新对象（{ config: { size: 'lg' } }），CSS-in-JS 库的浅比较就会失效，导致无谓的样式重建。用 useMemo 缓存 props 对象，或改用扁平字段（size="lg"）更稳妥。