Next.js+MUI项目用CSS变量仍遇SSR闪烁与Hydration不匹配问题

问题场景 #

使用Next.js 14.1.4（App Router）结合MUI 6.0.0-alpha.13开发应用，RootLayout代码如下：

<body>
<AppRouterCacheProvider>
    <CssVarsProvider defaultMode="system">
        <CssBaseline/>
        <InitColorSchemeScript defaultMode="system"/>
        {children}
    </CssVarsProvider>
</AppRouterCacheProvider>
</body>

问题现象 #

1. 当系统偏好设置为深色模式，刷新页面时会短暂显示浅色模式（约1秒）
2. 元素检查显示：
   • 初始服务端渲染的HTML标签：<html lang="en" data-color-scheme="dark">
   • Hydration完成后HTML标签变为：<html lang="en" data-color-scheme="dark" data-mui-color-scheme="dark">
3. 控制台出现Hydration不匹配警告：

Warning: Extra attributes from the server: data-color-scheme
    at html
    at RootLayout (webpack-internal:///(app-pages-browser)/./src/app/layout.tsx:21:11)
...

警告指向layout.tsx中第21行的<InitColorSchemeScript defaultMode="system"/>组件

问题原因 #

InitColorSchemeScript组件未正确生成MUI主题所需的data-mui-color-scheme属性，而是生成了无作用的data-color-scheme，导致服务端渲染与客户端Hydration后的属性不匹配，进而引发主题样式闪烁和Hydration错误。

临时修复方案 #

1. 复制MUI源码中的InitColorSchemeScript.js文件到本地项目中
2. 修改文件中的默认属性常量：
   将export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   修改为export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
3. 在RootLayout的<html>标签上添加suppressHydrationWarning={true}属性，抑制Hydration警告

内容的提问来源于stack exchange，提问作者MichiganAgain