React Material UI createTheme_default 不是一个函数

Question

我使用 vite 和 React 创建了一个项目。我创建一个主题将我的项目设置为从右到左。一切正常，项目运行正常。

const theme = createTheme({
  direction: 'rtl' , 
  typography: {
    "fontFamily": `"iransans"`,
    "fontSize": 11,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
   }
})
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin]
})


function App() {
  let history = useHistory();
  let contained = "Test The";
  return (
    <div className="App">
      <Router>
        <div>
          <Switch>
            <CacheProvider value={cacheRtl}>
              <ThemeProvider theme={theme}>
                <Route exact path="/applicant">
                  <Applicant />
                </Route>
              </ThemeProvider>
            </CacheProvider>
          </Switch>
        </div>
      </Router>
    </div>
  )
}
export default App

将 Slide 组件添加到我的项目后。突然我的项目停止工作，控制台显示

Box.js:5 未捕获类型错误：createTheme_default 不是 Box.js:5:22 的函数

我回滚我的更改（通过 git 检查）。但错误仍然显示。

我不明白发生了什么事，为什么在恢复更改后错误仍然存​​在？

Answer 1

不使用 ThemeProvider 只是简单的 MUI。我发现错误来自我导入 CSSBaseline 的 app.tsx 页面。

将 CSSBaseline 移动到首页上的 Box import 上方可以解决该问题：

从：

import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";

到：

import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";

Answer 2

我发现 Vite 缓存有问题，请尝试使用 --force 标志运行开发命令来修复缓存问题：

纱线开发——力量

或使用 npm

npm run dev --force

Answer 3

我遇到了同样的问题，我通过删除 node_modules/.vite/deps 文件夹并重新启动服务器来修复它。

Answer 4

对我来说，这是因为导入了 MUIBox组件：

import Box from '@mui/material/Box';
import { BoxProps } from '@mui/material/Box/Box';
import { useTheme } from '@mui/material/styles';

我把它改为

import { Box } from '@mui/material';
import { BoxProps } from '@mui/material';
import { useTheme } from '@mui/material';

它起作用了

Answer 5

我遇到了同样的错误，所以我删除了所有材料 ui 依赖项并重新安装它们，它对我有用。

yarn remove @mui/material @emotion/react @emotion/styled 

或者

npm uninstall @mui/material @emotion/react @emotion/styled 

Answer 6

主要错误是由于在访问组件之前没有获取主题提供程序的可用性，或者在其他情况下是 vite 缓存问题。

要解决第一种情况，请将您的应用程序组件包装在主题提供程序中。

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
   direction: 'rtl',
   // other theme properties
});

function App() {
   return (
      <ThemeProvider theme={theme}>
          <div className="App">
             ...
          </div>
      </ThemeProvider>
   )
};

现在，如果出现第二个问题，请使用标志重新启动服务器--force。

例如：npm run dev --force

Answer 7

我认为这是在 index.js 中给出的，而不是在 App.js 中给出的 我们只在 App.js 中给出路由，而不是提供者