ThemeProvider需包裹整个应用根节点，主题对象须扁平，样式中必须用函数形式${props=>props.theme.xxx}读取，主题状态需持久化至localStorage并客户端初始化。
直接用 ThemeProvider + 自定义 Hook 就能实现，不需要手写 class 切换或操作 document.body，但必须注意主题对象结构、样式消费方式和 SSR 兼容性这三处最容易翻车的地方。
ThemeProvider 必须包裹整个应用根节点
如果只包某个子组件，它的子组件就收不到主题；如果在 App 内部才引入 ThemeProvider，服务端渲染（SSR）时会因上下文丢失导致首屏闪烁或样式错乱。
- 正确做法：在
_app.js（Next.js）或最外层index.js中包裹ThemeProvider - 主题对象要扁平，避免嵌套过深，比如
{ colors: { primary: '#007bff' } }比{ theme: { palette: { primary: { main: '#007bff' } } } }更易消费 - 不要在
ThemeProvider外使用useTheme()，否则会抛出TypeError: Cannot read property 'theme' of undefined
样式中读取主题必须用 ${props => props.theme.xxx}
不能写成 ${props.theme.xxx}（会立即执行，无法响应更新），也不能漏掉 props 参数。模板字符串里所有动态值都得走函数返回路径，否则主题切换时样式不会重计算。
- ✅ 正确：
background-color: ${props => props.theme.bg}; - ❌ 错误：
background-color: ${props.theme.bg};（首次渲染后就固定了） - ❌ 错误：
background-color: ${theme.bg};（theme未定义） - 可配合解构简化：
color: ${({ theme }) => theme.text};
主题切换状态必须持久化并同步初始化
用户切到暗色模式后刷新页面又变回亮色，是因为没读取 localStorage 或系统偏好。单纯用 useState('light') 只是内存态，关掉标签页就丢了。
- 初始化时优先读
localStorage.getItem('theme')， fallback 到matchMedia('(prefers-color-scheme: dark)').matches - 每次调用
setTheme后，必须同步写入localStorage.setItem('theme', next) - 在 Next.js 中，需用
useEffect延迟到客户端执行初始化，否则 SSR 时访问localStorage会报错 - 如果用
next-themes，它已内置这些逻辑，useTheme()返回的resolvedTheme就是最终生效值
真正麻烦的不是切换动作本身，而是主题变量如何穿透到全局 CSS 变量（比如 :root）、如何与第三方组件库（如 antd）对齐、以及多标签页间状态同步——这些都不在 styled-components 职责范围内，得靠额外封装或专用库补足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
