Material-UI的ThemeProvider未对其库内子组件应用主题问题求助

• 混用了MUI v4和v5两个不兼容版本的包：@material-ui/*是MUI v4的官方包名，v5正式更名后包名统一为@mui/*，两个版本的ThemeProvider使用完全独立的React上下文，你用v4的ThemeProvider传递的主题配置，v5的Toolbar、Container、AppBar等组件完全无法读取，自然不会生效。
• 主题配置字段不匹配：如果使用MUI v5，暗黑模式的配置字段已经从v4的palette.type改为palette.mode，错误的字段会导致主题配置不生效。

1. 统一依赖版本
   卸载所有@material-ui/开头的依赖，安装v5版本的MUI相关包：

yarn remove @material-ui/core
yarn add @mui/material @emotion/react @emotion/styled

2. 统一所有导入路径
   所有MUI相关组件、工具函数全部从@mui/*路径导入，不要混用@material-ui的导入。
3. 修正主题配置字段
   将暗黑模式配置的type字段改为mode。

import React from 'react'
// 统一使用v5的导入路径
import { ThemeProvider, createTheme } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

import Router from './components/Router'
import NavBar from './components/NavBar'
import Toolbar from '@mui/material/Toolbar'
import Container from '@mui/material/Container'

export function App(): JSX.Element {
  const theme = createTheme({
    palette: {
      // v5使用mode字段配置暗黑模式
      mode: 'dark',
      primary: {
        main: '#ffeb3b',
      },
      secondary: {
        main: '#795548',
      },
    },
  })

  return (
    <ThemeProvider theme={theme}>
      {/* CssBaseline放在顶部，覆盖浏览器默认样式 */}
      <CssBaseline />
      <NavBar />
      <Toolbar />
      <Container>
        <Router />
      </Container>
    </ThemeProvider>
  )
}

如果修改后仍有问题，检查NavBar组件内的AppBar是否硬编码了color、style等属性，手动指定的样式优先级高于主题配置，会覆盖主题效果。

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