MUI 免费主题仪表板存在许多错误

Question

我正在尝试使用 React、MUI、SASS 和 typescript 创建一个新的前端项目，并使用 MUI 建议的仪表板模板（https://mui.com/material-ui/getting-started/templates/）。为此，我使用了一些命令：

反应：

npx create-react-app my-mui-app --template typescript

对于SASS：

npm i sass

对于 MUI ：

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

对于模板，我遵循 github 存储库中编写的内容（https://github.com/mui/material-ui/tree/v6.1.7/docs/data/material/getting-started/templates/dashboard） :

npm i @mui/icons-material @mui/x-charts

.

然后我按照他们说的做了，下载了完整的 mui 项目（https://github.com/mui/material-ui/tree/v6.1.7）并在 'src 中的我的项目中复制了仪表板和共享它们' 文件夹。我还删除了 .js 文件，因为我的项目是打字稿。

当我尝试启动它时

npm start

我遇到了很多错误，读完它们后我明白该文档可能有点过时，必须安装更多依赖项：

npm i @mui/x-data-grid @mui/x-date-pickers @mui/x-tree-view dayjs

在新的 npm 启动之后，我发现我仍然有很多错误，其中很多来自于当主题界面来自名为

createThemeNoVars

的文件时，我们在很多文件中使用 theme.vars || theme...将每个

theme.vars || theme

替换为

theme

后，我仍然有很多错误，例如

Property 'getItem' does not exist on type 'Partial<{}>'.

和错误列表不小...

所以这是我的问题：模板是否完全损坏或者我做错了什么？模板的最后一次修改是在 2 周前，所以我认为它不会被 THAT 破坏，不是吗？该模板看起来不错，所以如果可能的话我想使用它而不是从头开始

如果您想知道这是我的依赖项列表：

Answer 1

MUI 仪表板模板似乎并未完全损坏，但需要进行一些调整才能与最新版本的 React、TypeScript 和 MUI 配合使用。以下是修复方法：

1-安装依赖项：确保安装了所有必需的依赖项：

npx create-react-app my-mui-app --template typescript
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material @mui/x-data-grid @mui/x-date-pickers @mui/x-tree-view @mui/x-charts
npm install dayjs sass

2-修复 theme.vars 错误： 替换 theme.vars ||整个代码中只有主题的主题。确保使用 createTheme 正确设置您的主题：

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

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
});

function App() {
  return <ThemeProvider theme={theme}>{/* Your App */}</ThemeProvider}

3-解决类型错误： 对于诸如属性“getItem”在类型“Partial<{}>”上不存在之类的错误，请确保安装类型定义：

npm install --save-dev @types/react @types/react-dom

4-检查模板更新： 确保您使用的是最新版本的 MUI 模板，并且仅复制必要的文件（仪表板、共享等）。

5-重新启动项目： 使用 npm start 运行项目。逐步调试任何剩余的错误。