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

834
Views
MaterialUI - 'StylesProvider' cannot be used as a JSX component

I have an app written in React with TypeScript and lately after refreshing node modules and the lockfile I am getting this error when trying to run the app:

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>

The weird thing is it was working correctly but it just stopped working now. The App.ts is here in a reduced version just to show more or less what it looks like:

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

About your question, I think you can try to change the StylesProvider import path like this:

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

You could try this and let me know is work or not.

about 4 years ago · Juan Pablo Isaza Report

0

If you are using MUI v4, you can follow this documentation

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

If you are migrating from v4 to v5, this documentation can help you

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

Make sure your MUI version first with this command

npm list @material-ui/core

npm list @material-ui/styles

I hope it gives you hint to solve your issue.

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!