'Not able to create theme using Material UI's ThemeProvider and createTheme

I kept getting a failed to compile error:

Attempted import error: 'createTheme' is not exported from '@material-ui/core/styles'.

Code:

import React, { Suspense, lazy } from "react";
import "./App.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import useToken from "./util/useToken";
import Page404 from "./pages/404";
import { ThemeProvider } from "@material-ui/styles";
import { createTheme } from "@material-ui/core/styles";

const Landing = lazy(() => import("./pages/Landing/Landing"));
const Login = lazy(() => import("./pages/Login"));
const Homepage = lazy(() => import("./pages/Homepage/Homepage"));
const UserProfile = lazy(() => import("./pages/User/UserProfile"));
const Post = lazy(() => import("./pages/Post"));

const theme = createTheme({
  palette: {
    primary: {
      // Purple and green play nicely together.
      main: "red",
    },
    secondary: {
      // This is green.A700 as hex.
      main: "#11cb5f",
    },
  },
});

function App() {
  const { setToken, token } = useToken();

  return (
    <>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <Suspense
            fallback={
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  flexDirection: "column",
                  justifyContent: "center",
                  height: "100vh",
                }}
              >
                Page is Loading...
              </div>
            }
          >
            <Switch>
              <Route exact path="/">
                <Landing token={token} />
              </Route>
              <Route exact path="/home">
                <Homepage setToken={setToken} />
              </Route>
              <Route exact path="/login">
                <Login token={token} />
              </Route>
              <Route exact path="/posts/:postId">
                <Post token={token} />
              </Route>
              <Route exact path="/users/:userId">
                <UserProfile token={token} />
              </Route>
              <Route component={Page404} />
            </Switch>
          </Suspense>
        </BrowserRouter>
      </ThemeProvider>
    </>
  );
}

export default App;

Using these versions of MaterialUI packages:

"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@material-ui/styles": "^4.11.2",

I've tried importing directly from @material-ui/styles still getting same error.

PLEASE IGNORE: Adding additional text as StackOverflow says that post is mostly code and that I should add more details, even thought there is enough details provided :)

reactjs material-ui

Solution 1:^[1]

For anyone that has the same issue in the future, basically what Max wrote:

Try to stop the project. Remove package-lock.json, node_modules, reinstall node_modules and start the project again.

Solution 2:^[2]

You can import the lib in one line, and hope so that would solve your problem.

import { ThemeProvider, createTheme } from '@material-ui/core/styles';

Solution 3:^[3]

Just update to "@material-ui/core":

import { createTheme } from "@material-ui/core";

Solution 4:^[4]

There is no function createtheme in material-ui/core/style Instead use

import {createMuiTheme} from '@material-ui/core';
const theme = createMuiTheme({
palette: {
primary: {
  main: "HEXADECIMAL COLOR"
},
secondary: {
  main: "HEXADECIMAL COLOR"
}

} });

Solution 5:^[5]

Use,

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

in the same way as you would have used ThemeProvider and createTheme. :)

Solution 6:^[6]

I'd try restarting the IDE after reinstalling the packages, I have this issue with VS Code often lately and restarting seems to help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Stefan
Solution 2	Zia
Solution 3	Viet
Solution 4	gigme lepcha
Solution 5	Suraj Rao
Solution 6	user8738995

'Not able to create theme using Material UI's ThemeProvider and createTheme

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]