Material UI Dark Mode实现时Paper组件样式冲突问题求助

• 缺失MUI官方提供的<CssBaseline />组件：该组件负责根据当前主题模式自动同步全局html、body的背景色、文字色，以及重置浏览器默认样式，是实现深色模式的必需配置，你的代码中未引入该组件
• 外层不必要的Paper组件误用：你外层套的Paper仅用于设置左侧边距，没有必要使用Paper组件，MUI其他组件内部依赖的Paper是独立实例，和外层这个手动添加的Paper无关联
• injectFirst配置可能带来的样式优先级问题：你开启了injectFirst让自定义样式优先级高于MUI默认样式，如果存在全局样式固定了背景、文字颜色，会覆盖主题生效

方案1（最优，无副作用） #

1. 从@mui/material中引入CssBaseline组件，放在ThemeProvider的直接子节点位置
2. 将外层仅用于设置边距的Paper组件替换为普通div
   修改后的_app.js核心代码如下：

import { CssBaseline } from '@mui/material'

<StyledEngineProvider injectFirst>
  <ThemeProvider theme={theme}>
    {/* 新增CssBaseline，自动同步全局主题样式 */}
    <CssBaseline />
    <Provider store={store}>
      {/* 替换Paper为普通div，仅保留边距设置 */}
      <div style={{ marginLeft: '250px' }}>
        <Layout onGetTheme={getTheme}>
          <main>
            <Head>
              <title>page</title>
              <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
              />
              <meta
                name="viewport"
                content="initial-scale=1.0, width=device-width"
              />
            </Head>
            <Component {...pageProps} />
            <Footer></Footer>
          </main>
        </Layout>
      </div>
    </Provider>
  </ThemeProvider>
</StyledEngineProvider>

方案2（必须保留外层Paper时使用） #

如果因特殊逻辑必须保留外层Paper，不需要加全局!important的CSS，只需给Paper显式绑定主题变量即可：

<Paper 
  sx={{ 
    marginLeft: '250px',
    bgcolor: 'background.default', // 显式绑定主题背景色
    color: 'text.primary' // 显式绑定主题文字色
  }} 
  elevation={0}
>
  {/* 原有内容 */}
</Paper>

• 检查全局CSS文件中是否存在固定body、*选择器的color、background-color的代码，如有删除或修改为适配主题的变量
• 确认darkMode状态切换逻辑正常，切换时theme实例可以正常重新生成

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