MUI X Desktop Date Picker部署后不显示及localeText未定义问题

问题说明 #

之前使用@mui/lab/DatePicker，按照MUI官方文档要求改为@mui/x-date-pickers相关导入：

• import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
• import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

修改后出现localeText is undefined错误，当前使用的代码如下：

import AdapterDateFns from "@mui/lab/AdapterDateFns";
import DatePicker from "@mui/lab/DatePicker";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

<LocalizationProvider
  dateAdapter={AdapterDateFns}
>
  <DatePicker
    label="জন্ম তারিখ"
    name="birthDate"
    value={x.birthDate}
    disabled={grantorDisabled[i].disableGrantor}
    onChange={(e) => handleDateChangeEx(e, i)}
    renderInput={(params) => (
      <TextField
        {...params}
        fullWidth
        size="small"
        style={{ backgroundColor: "#FFF" }}
      />
    )}
  />
</LocalizationProvider>

解决步骤 #

1. 统一依赖包导入路径
   你当前代码仍在导入@mui/lab下的组件，但官方要求改用@mui/x-date-pickers，这是核心问题。替换所有相关导入：

   // 正确导入方式
   import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
   import { DatePicker } from '@mui/x-date-pickers/DatePicker';
   import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
   

2. 修复localeText未定义问题
   该错误多因缺少本地化配置或适配器版本不匹配。如果需要孟加拉语本地化，需导入date-fns对应语言包并传递给适配器：

   import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
   import bn from 'date-fns/locale/bn';
   import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
   
   // 组件内使用
   <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={bn}>
     <DatePicker
       label="জন্ম তারিখ"
       name="birthDate"
       value={x.birthDate}
       disabled={grantorDisabled[i].disableGrantor}
       onChange={(e) => handleDateChangeEx(e, i)}
       renderInput={(params) => (
         <TextField
           {...params}
           fullWidth
           size="small"
           style={{ backgroundColor: "#FFF" }}
         />
       )}
     />
   </LocalizationProvider>
   

3. 确认依赖安装完整
   确保已安装必要依赖：

   npm install @mui/x-date-pickers date-fns
   # 或使用yarn
   yarn add @mui/x-date-pickers date-fns
   

4. 检查版本兼容性
   确认@mui/material、@mui/x-date-pickers和date-fns版本相互兼容，避免版本差异引发异常。

内容的提问来源于stack exchange，提问作者Raju Ahmed