reactjs - ThemeProvider no aplica el tema a los componentes hijos de la biblioteca material ui
Estoy usando Typescript, React, Material-UI (ahora MUI) y Webpack.
Estoy tratando de aplicar un tema usando ThemeProvider de material-ui, pero parece que ese tema solo se aplica a los componentes que no son de la biblioteca 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>
)
}
Puedo ver que el modo oscuro se activa siempre que el fondo de la aplicación no sea un elemento Paper de MUI. También, mi AppBar contenido dentro de mi componente NavBar no cambia de color cuando cambio los colores principales de la paleta.
Poner el tema en un archivo diferente no ayuda. Y ya he ejecutado Yarn upgrade, así que todo debería estar actualizado. ¿Qué está pasando?