Emotion 的 createGlobalStyle 需动态插值主题变量，通过 (props) => \ :root { --color-primary: ${props.theme.primary} \`\` 响应 ThemeProvider 更新；useTheme 仅在 styled/css/GlobalStyles 组件内有效，否则需 useContext(ThemeContext)；FOUC 通过预埋默认变量、同步设置 document.documentElement.style 解决；Next.js SSR 需基于 cookie 或 fallback 主题，避免 hydration mismatch。
Emotion 的 createGlobalStyle 怎么配合主题变量用？
全局样式（比如 :root 中的 CSS 变量）必须在主题切换时实时更新，否则 createGlobalStyle 渲染后就固定了。不能只靠它一次性注入变量 —— 它不响应主题变化。
正确做法是把主题变量提取成 JS 对象，再通过 createGlobalStyle 动态插值：
const themeVars = (theme) => `
:root {
--color-primary: ${theme.primary};
--color-bg: ${theme.bg};
}
`;
然后在组件中根据当前主题调用：
const GlobalStyles = createGlobalStyle`${(props) => themeVars(props.theme)}`;
再配合 ThemeProvider 传入 theme，就能让全局变量随主题重渲染。注意：这里 props.theme 必须来自 Emotion 的上下文，不是随便传个对象。
立即学习“前端免费学习笔记（深入）”；
为什么 useTheme 在非 styled 组件里拿不到主题？
useTheme 是 Emotion 提供的 Hook，但它只在 ThemeProvider 的子树内有效，且要求组件被 Emotion 的渲染机制“捕获”——比如用了 styled、css 或直接包裹了 GlobalStyles。
常见错误是写一个普通函数组件，没用任何 Emotion API，却调用 useTheme，结果返回 undefined。
解决方法只有两个：
- 确保该组件是
styled创建的，或内部调用了css； - 如果必须在纯逻辑组件里读主题，改用
useContext(ThemeContext)（Emotion 的ThemeContext是公开的，但需手动 import）； - 更稳妥的做法：把主题状态提到顶层 Context，由
ThemeProvider和业务逻辑共用同一份 state，避免双重管理。
切换主题时样式闪烁（FOUC）怎么压？
闪烁本质是 CSS 变量还没生效，DOM 已经按旧值渲染了一帧。关键不在 Emotion，而在变量注入时机和浏览器渲染流水线。
三个实际有效的控制点：
- 在 HTML
<head>里预埋一套默认 CSS 变量（比如 light 主题），避免首次渲染无值； - 主题切换时，先同步写入
document.documentElement.style，再触发 React 状态更新 —— 这样 CSS 变量会早于组件重渲染生效； - 避免在
createGlobalStyle里写依赖复杂计算的变量，它每次重渲染都会重新生成字符串，可能触发多余 style 标签插入。
示例片段：
function setTheme(theme) {
Object.entries(theme).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--${key}`, value);
});
setCurrentTheme(theme); // 再触发 React 更新
}
Emotion + Next.js SSR 下主题怎么保持一致？
服务端渲染时，ThemeProvider 拿不到客户端的主题偏好（比如 localStorage 或系统色），会导致首屏渲染和客户端不一致，React 报 Hydration mismatch。
核心原则：SSR 阶段只能基于请求上下文（如 header、cookie）或 fallback 值决定主题，不能读客户端存储。
可行路径：
- 用 cookie 传递主题偏好，在 Next.js 的
getServerSideProps里解析并注入初始 theme； - 服务端默认用 light，但加
data-theme="light"到<html>标签，并让客户端 JS 立即根据 localStorage 覆盖 —— 注意要加document.documentElement.setAttribute('data-theme', ...)，否则 Emotion 不会触发重渲染； - 禁用主题相关的 CSS-in-JS 的 SSR（用
suppressHydrationWarning+ 客户端动态挂载），但会损失首屏样式精准度。
最容易被忽略的是：Next.js App Router 中 ThemeProvider 必须放在 Client Component 里，且不能跨 layout 缓存 —— 主题状态一旦被缓存，切换就会失效。
