在 styled-components 模板字符串中直接用 ${props => props.color} 插值即可，props 由库自动注入；避免套箭头函数，复杂逻辑应抽离为纯函数，支持与 css 自定义属性混合使用。
直接用 JavaScript 变量或函数插值就行，不需要额外声明 CSS 自定义属性（--xxx）——但两者可以共存，关键看你要解决什么问题。
怎么在 styled-components 模板字符串里用 JS 变量
模板字符串中所有 ${...} 都是 JS 执行上下文，能访问 props、模块级变量、甚至提前定义的工具函数。
- 别写
styled.div`color: ${() => 'red'}`—— 这个箭头函数不会被传入props，结果永远是静态值 - 正确写法是
styled.div`color: ${props => props.color || 'red'}`，props由 styled-components 自动注入 - 逻辑复杂时抽成独立函数：比如
const getBg = (props) => props.variant === 'danger' ? '#f00' : '#007bff'，再在样式里写${getBg} - 注意：插值里不能写
if语句，只能用三元、&&、||或提前计算好的值
为什么有时候要用 CSS 自定义属性（--xxx）而不是 JS 变量
CSS 变量适合需要浏览器运行时响应式变更、或要被伪元素/动画/媒体查询复用的场景；JS 插值只在 React 渲染时求值，无法被 CSS 引擎直接感知。
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
- 比如主题色切换想用
@keyframes动画渐变，就得靠:root { --theme-color: #007bff }+transition: background-color，JS 插值做不到 - 又比如你想让子组件的伪元素继承父级颜色：
&::before { color: var(--text-color) }，这时必须用 CSS 变量，${props => props.color}在伪元素里不生效 - 混合使用没问题：
background-color: ${props => props.bg || 'var(--bg-default)'}，fallback 到 CSS 变量很自然
attrs() 和 defaultProps 哪个更适合传默认变量
attrs() 是首选，它在组件实例化阶段就注入属性，能参与样式计算；defaultProps 是 React 层的兜底，对 styled-components 内部插值不可靠（尤其 SSR 场景）。
-
const Input = styled.input.attrs({ size: 'medium' })`font-size: ${props => props.size === 'large' ? '18px' : '14px'};`✅ 安全 -
Input.defaultProps = { size: 'medium' }❌ 如果父组件没传size，SSR 时props.size可能是undefined，导致样式错乱 -
attrs()支持函数形式：attrs((props) => ({ id: props.id || `input-${Date.now()}` }))，但注意避免副作用（比如每次生成新 ID 会破坏服务端 hydration）
主题（theme）变量和普通 props 变量混用要注意什么
theme 必须通过 ThemeProvider 注入，不是随便挂个 props.theme 就能用；它和普通 props 是两个来源，别指望它们自动合并。
- 错误写法：
const Box = styled.div`color: ${props => props.theme?.color || props.color};`—— 如果忘了包ThemeProvider，props.theme是undefined，整个表达式可能报错或 fallback 失效 - 推荐写法：
color: ${props => props.color ?? props.theme?.color ?? '#333'}，用空值合并运算符更安全 - 主题对象必须是 plain object，不能含函数、
Date、RegExp等无法 JSON 序列化的值，否则 SSR 会失败 - 别在 theme 里放计算函数（如
toPx: n => `${n}px`），SSR 时会被丢弃，客户端和服务器渲染结果不一致
最常被忽略的一点：CSS 变量和 JS 插值不是替代关系，而是分工关系——JS 控制“该不该用”，CSS 控制“怎么动”。混用时记得检查 hydration 是否一致、fallback 是否覆盖所有分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
