reactjs 材料ui实验室日期选择器,无法解析“@material-ui/lab/AdapterDateFns”

oknwwptz  于 2023-10-17  发布在  React
关注(0)|答案(6)|浏览(146)

无法解析“@material-ui/lab/AdapterDateFns”
无法解析“@material-ui/lab/DateTimePicker”
无法解析“@material-ui/lab/LocalizationProvider”
即使安装了@material-ui/lab,我也会收到这些错误

0mkxixxg

0mkxixxg1#

这对我很有效

npm install @mui/lab

在Material UI v5中,你需要安装@mui/lab。我的依赖项在这里:

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

有关更多信息,请查看此link

xwmevbvl

xwmevbvl2#

我在这里有一个工作的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/pickers-migration/

// 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"
  },
}
jtw3ybtb

jtw3ybtb3#

尝试运行npm install @material-ui/core@nextnpm install @material-ui/lab@next
这将使您转到版本5。
如果需要,请删除node_modules文件夹并运行npm install
现在,如果查看node_modules/@material-ui中的lab文件夹,您将看到

zkure5ic

zkure5ic4#

确保您安装了日期管理库。我认为date-fns库将支持@material-ui/lab/AdapterDateFns
日期-FNS安装
我在mui documentation for React Date Picker上读到的。

polkgigr

polkgigr5#

这对我很有效!!我进入node_modules查找特定的文件:
1.进口的位置不准确,所以我相应地改变了它们
1.然后所有这些组件都作为默认值导出,所以我删除了花括号,它对我很有效。

我安装了这些:

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

daupos2t6#

对于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>
  );
}

有关更多详细信息,请阅读此link

相关问题