无法使用 Material UI 的 ThemeProvider 和 createTheme 创建主题答案

【问题标题】：Not able to create theme using Material UI's ThemeProvider and createTheme无法使用 Material UI 的 ThemeProvider 和 createTheme 创建主题
【发布时间】：2021-10-30 00:50:19
【问题描述】：

我一直收到编译失败的错误：

尝试导入错误：“createTheme”未从 '@material-ui/core/styles'。

代码：

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;

使用这些版本的 MaterialUI 包：

"@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",

我已尝试直接从 @material-ui/styles 导入，但仍然出现相同的错误。

请忽略：添加额外的文本，因为 StackOverflow 说帖子主要是代码，我应该添加更多细节，即使提供了足够的细节:)

【问题讨论】：

尝试停止该项目。删除package-lock.json、node_modules，重新安装node_modules，重新启动项目。
改用import { createMuiTheme } from "@material-ui/core";。
@Max 所写的内容有所帮助。我也尝试过createMuiTheme，但仍然收到相同的错误消息，谢谢！

标签： reactjs material-ui

【解决方案1】：

只需更新到"@material-ui/core"：

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

【讨论】：

尝试导入错误：“createTheme”未从“@material-ui/core”导出。

【解决方案2】：

对于以后遇到同样问题的人，基本上是Max 写的：

尝试停止该项目。删除package-lock.json、node_modules，重新安装node_modules，重新启动项目。

【讨论】：

【解决方案3】：

您可以在一行中import lib，希望这样可以解决您的问题。

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

【讨论】：

【解决方案4】：

material-ui/core/style中没有createtheme函数而是使用

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

} });

【讨论】：