React js Material UI错误导出“LocalizationProvider”（导入为“LocalizationProvider”）在“@mui/lab/LocalizationProvider”中找不到

Question

我是 React Js Material Ui 的新手。我正在使用最新版本的 MUI。我已经安装了 mui/lab。当我尝试使用 DatePicker 组件时，它会抛出这样的错误。

这是我的代码。

import * as React from 'react';
    import AdapterDateFns from '@mui/lab/AdapterDateFns';
    import LocalizationProvider from '@mui/lab/LocalizationProvider';
    import DatePicker from '@mui/lab/DatePicker';
    
    function User() {
  const [joiningDate, handleJoiningDate] = useState(new Date());
  
   return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        value={joiningDate} onChange={ handleJoiningDate }   
      />
    </LocalizationProvider>
  );
}

export default User;

当我保存此代码时，我的终端中出现这样的错误。

export 'LocalizationProvider' (imported as 'LocalizationProvider') was not found in '@mui/lab/LocalizationProvider

https://mui.com/components/date-picker/#localization 我尝试使用上面的链接。但我无法纠正为什么会出现这个错误！帮助我摆脱这个错误。提前致谢。

Answer 1

我面临着类似的问题。我通过尝试以下导入之一解决了这个问题：

import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
// or
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// or
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
// or
import { LocalizationProvider } from '@mui/x-date-pickers';

就我而言，第一个不起作用，然后我通过第二次导入更改了它，它工作得很好。

请在此处找到官方 MUI 文档

编辑：

还要确保您已经安装了date picker依赖项。点击此链接查看如何根据您的需要安装它。

如果您使用 MUI 的实际版本，请注意日期选择器现在从 移动@mui/lab到@mui/x-date-pickers。你需要迁移。请按照此处的官方说明进行操作。