material ui lab 日期选择器，无法解析“@material-ui/lab/AdapterDateFns”

Question

无法解析“@material-ui/lab/AdapterDateFns”

无法解析“@material-ui/lab/DateTimePicker”

无法解析“@material-ui/lab/LocalizationProvider”

即使安装了@material-ui/lab，我仍然收到这些错误

Answer 1

这对我来说非常有效

npm install @mui/lab

在 Material UI v5 中，您需要安装@mui/lab。我的依赖项在这里：

  "dependencies": {
    "@mui/lab": "^5.0.0-alpha.54",
    "@mui/material": "^5.2.1",
  }

欲了解更多信息，请查看此链接

Answer 2

我这里有一个可用的codesandbox：https://codesandbox.io/s/youthful-wave-8xjy4

确保

@material-ui/core

和

@material-ui/lab

均处于

"5.0.0-alpha.24"

或更高版本，因为我在遵循以下指南时遇到了与您相同的导入错误：https://next.material-ui.com/guides/选择器迁移/

// package.json
{
  "dependencies": {
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "@material-ui/core": "5.0.0-alpha.24",
    "@material-ui/lab": "5.0.0-alpha.24",
    "date-fns": "2.17.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "4.0.0"
  },
}

Answer 3

尝试运行

npm install @material-ui/core@next

和

npm install @material-ui/lab@next

这应该会让您升级到版本 5。

如果需要，删除

node_modules

文件夹并运行

npm install

。

现在，如果您查看 node_modules/@material-ui 中的

lab

文件夹，您将看到

Answer 4

确保您安装了日期管理库。我认为

@material-ui/lab/AdapterDateFns

将得到 date-fns 库的支持。

date-fns 安装

我在 React Date Pickermui 文档中阅读了它。

Answer 5

这对我有用！！！ 我进入node_modules查找特定文件：

1. 导入的位置不准确，所以我更改了它们 相应地
2. 然后所有这些组件都会默认导出，所以我删除了 大括号对我有用。

我已经安装了这些：

    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/lab": "^5.0.0-alpha.108",
    "@mui/material": "^5.10.14",

Answer 6

对于 React MUI 中的日期选择器，安装以下两个：

• @mui/x-date-pickers 免费社区版本。
• 操作日期的日期库。

npm install @mui/x-date-pickers
    
// Install date library (if not already installed)
npm install dayjs

用于渲染日期选择器：

import * as React from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function FirstComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker />
    </LocalizationProvider>
  );
}

欲了解更多详情，请阅读此链接。

Answer 7

https://mui.com/x/react-date-pickers/getting-started/ 它可以帮助你！

这对我有用！！！！