ThemeProvider 不会将主题应用于 Material ui 库中的子组件

Question

我正在使用 Typescript、React。Material-UI（现在的 MUI）和 Webpack。

我正在尝试使用material-ui 的ThemeProvider 应用主题，但它似乎只将该主题应用于不来自material-ui 库的组件。

import React from 'react'
import { ThemeProvider, CssBaseline } from '@material-ui/core'
import { createTheme } from '@material-ui/core/styles'

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: {
      type: 'dark',
      primary: {
        main: '#ffeb3b',
      },
      secondary: {
        main: '#795548',
      },
    },
  })

  return (
    <ThemeProvider theme={theme}>
      <NavBar />
      <Toolbar />
      <Container>
        <Router />
      </Container>
      <CssBaseline />
    </ThemeProvider>
  )
}

只要应用程序的背景不是 MUI 纸张元素，我就可以看到深色模式正在切换。当我更改调色板主颜色时，导航栏组件中包含的 AppBar 也不会更改颜色。

将主题放入不同的文件中没有帮助。我已经运行了 Yarn 升级，所以一切都应该是最新的。到底是怎么回事？