Recibo el siguiente error cuando envuelvo MuiThemeProvider en App.js. La página no se cargará en absoluto. Lo he usado de manera similar en otros proyectos, así que no estoy seguro de por qué sucede esto.

react.development.js:1476 Error no detectado: Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación

Aplicación.js

 import React from 'react' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Home from './views/Home' import ProjectDetailsForm from './components/ProjectDetailsForm/ProjectDetailsForm' import { MuiThemeProvider } from '@material-ui/core/styles' import theme from './styles/theme' function App() { return ( <MuiThemeProvider theme={theme}> <Router> <div className="app"> <Routes> <Route path="/" element={[ <Home key="1"></Home>, <ProjectDetailsForm key="2"></ProjectDetailsForm> ]}></Route> </Routes> </div> </Router> </MuiThemeProvider> ) } export default App

tema.js

 // import { common } from '@material-ui/core/colors' import { createTheme } from '@material-ui/core/styles' // import { black } from '@mui/material/colors' const theme = createTheme({ components: { MuiFormLabel: { styleOverrides: { root: { color: '#000' } } }, MuiInputLabel: { styleOverrides: { root: { color: '#000' } } } } }) export default theme