Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

831
Views
MaterialUI: 'StylesProvider' no se puede usar como un componente JSX

Tengo una aplicación escrita en React con TypeScript y, últimamente, después de actualizar los módulos de nodo y el archivo de bloqueo, recibo este error cuando intento ejecutar la aplicación:

 TypeScript error in C:/repos/jit/era-frontend/src/App.tsx(23,16): 'StylesProvider' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<StylesProviderProps, any, any> | null' is not a valid JSX element. Type 'Component<StylesProviderProps, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<StylesProviderProps, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/repos/jit/era-frontend/node_modules/@types/testing-library__react/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props TS2786 21 | <UserProvider> 22 | <ThemeProvider theme={theme}> > 23 | <StylesProvider injectFirst> | ^ 24 | <GlobalProvider>{routes}</GlobalProvider> 25 | </StylesProvider> 26 | </ThemeProvider>

Lo extraño es que funcionaba correctamente, pero ahora dejó de funcionar. El App.ts está aquí en una versión reducida solo para mostrar más o menos cómo se ve:

 import React from "react"; import { BrowserRouter as Router } from "react-router-dom"; import DateFnsUtils from "@date-io/date-fns"; import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles"; import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import { GlobalProvider } from "globalContext/GlobalContext"; import routes from "router/routes"; import "moment/locale/en-gb"; import theme from "./themes"; import "./App.css"; function App() { return ( <Router> <MuiPickersUtilsProvider utils={DateFnsUtils}> <ThemeProvider theme={theme}> <StylesProvider injectFirst> <GlobalProvider>{routes}</GlobalProvider> </StylesProvider> </ThemeProvider> </MuiPickersUtilsProvider> </Router> ); } export default App;
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Acerca de su pregunta, creo que puede intentar cambiar la ruta de importación de StylesProvider de esta manera:

 import { StylesProvider } from '@material-ui/styles';

Podrías probar esto y decirme si funciona o no.

about 4 years ago · Juan Pablo Isaza Report

0

Si está utilizando MUI v4, puede seguir esta documentación

https://v4.mui.com/styles/api/#stylesprovider

Si está migrando de v4 a v5, esta documentación puede ayudarlo

https://mui.com/material-ui/guides/migration-v4/#mui-material-styles

Asegúrese primero de su versión de MUI con este comando

 npm list @material-ui/core npm list @material-ui/styles

Espero que te sirva de pista para solucionar tu problema.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!