用途：帮助在 Next.js 中正确实现 MUI 服务端渲染，避免样式丢失、闪烁与水合不匹配，并给出 RSC 兼容与零运行时样式方案。
主要能力
- App Router（v13+）：通过客户端 ThemeRegistry 组件，用 useServerInsertedHTML 将 Emotion 生成的服务端样式注入文档 head。核心是 EmotionCache.tsx 与 ThemeRegistry.tsx。依赖：npm install @mui/material @emotion/react @emotion/styled @emotion/cache。
- Pages Router：用 _document.tsx 在渲染时提取关键 CSS 注入初始 HTML。需 createEmotionCache 工具，_app.tsx 用 CacheProvider，_document.tsx 用 extractCriticalToChunks。额外依赖：npm install @emotion/server。
- RSC 兼容：MUI 组件不能用 React 服务端组件渲染，任何从 @mui/material 导入的文件必须加 'use client'。给出了三种模式：服务端取数+薄客户端包装、仅交互区域做客户端岛、统一 'use client' 的 barrel 再导出。建议把边界尽量下移到组件树叶子。
- CSS 变量模式防 FOUC：MUI v6+ 支持 cssVariables: true，配合 getInitColorSchemeScript 在 React 水合前同步设置颜色方案。主题里配置 colorSchemes（light/dark）与 colorSchemeSelector，运行时可 useColorScheme 切换。使用该脚本时需在 html 上加 suppressHydrationWarning。
- Pigment CSS：MUI 零运行时 CSS-in-JS，构建时抽取静态 CSS。安装 npm install @pigment-css/react @pigment-css/nextjs-plugin，在 next.config.mjs 用 withPigment 包装配置并设置 transformLibraries: ['@mui/material']。相比 Emotion，运行时代码约从 12 kB gzip 降到 0 kB，无需 useServerInsertedHTML 或 extractCriticalToChunks，服务端组件可用；但动态样式支持有限（多依赖 CSS 变量），构建时间略长，需 MUI v6+。
常见坑：useMediaQuery 在服务端返回 false，易造成水合不匹配，可提供 ssrMatchMedia 或设置 noSsr；Portal 类组件（Dialog、Menu、Popper、Tooltip）不要自行做服务端/客户端判断，MUI 已内部延迟挂载，额外判断会引发不匹配。
限制：资料未提供具体版本要求之外的兼容细节、收费信息、性能基准与测试结论；部分示例末尾被截断。