JS插值直接用${props => props.color}即可，但动画、伪元素继承和媒体查询需CSS变量；styled组件中插值必须返回合法CSS值且接收props；createGlobalStyle需显式声明({theme})参数才能访问主题。
直接用 ${props => props.color} 插值就能把 JS 变量塞进样式里，不需要提前声明 CSS 变量（--xxx）；但如果你要支持动画、伪元素继承或媒体查询响应式切换，就必须用 CSS 变量配合 var(--color)。
怎么在 styled 组件里安全插值 JS 变量
所有 ${} 里写的都是 JS 执行上下文，能访问 props、模块变量、甚至外部函数，但必须保证返回的是合法 CSS 值。
- ✅ 正确写法：
styled.div`color: ${props => props.color || '#000'};`——props由 styled-components 自动注入 - ❌ 错误写法：
styled.div`color: ${() => 'red'}`—— 箭头函数没接收props，永远静态 - 逻辑复杂时抽成独立函数：
const getBg = (props) => props.variant === 'danger' ? '#f00' : '#007bff';，再写${getBg} - 别在插值里写
if语句，只用三元、&&、||或提前算好
什么时候非得用 CSS 自定义属性（--xxx）
CSS 变量不是替代 JS 插值的，而是补它的短板：JS 插值只在 React 渲染时求值，CSS 引擎看不到；而 --xxx 是浏览器原生支持的运行时变量。
- 需要
@keyframes动画渐变颜色？必须靠:root { --theme-color: #007bff }+transition - 想让
&::before伪元素读取父级主题色？color: var(--text-color)才行，${props => props.color}在伪元素里不生效 - 媒体查询中动态改一组颜色？
@media (prefers-color-scheme: dark) { :root { --bg: #111 } }更干净 - 可以混合用：
background-color: ${props => props.bg || 'var(--bg-default)'};，JS 值 fallback 到 CSS 变量
createGlobalStyle 里怎么用 theme 和 CSS 变量
createGlobalStyle 默认不自动读取 ThemeProvider 的 theme，必须显式声明参数并透传。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
const GlobalStyle = createGlobalStyle(({ theme }) => `:root { --primary: ${theme.primary}; } body { background: ${theme.bg}; }`); - ❌ 错误写法：
createGlobalStyle`body { color: ${props => props.theme.text}; }`—— 没声明函数签名，props.theme是undefined -
<globalstyle theme="{lightTheme}"></globalstyle>必须在 JSX 中显式传入，不能依赖上下文自动注入 - 别把它放进
useEffect或条件渲染里，SSR 会漏掉，首屏闪白（FOUC）
最常被忽略的一点：插值函数执行时机不可控，可能被多次调用，所以里面别放 console.log 或生成随机 ID 这类副作用；CSS 变量虽然灵活，但一旦设在 :root，就全局生效，改一个值可能影响所有组件，调试时得盯紧 cascade 范围。
