MUI X Date Range Picker异常及安装报错问题求助

开发者阿泽

2026-8-12

解决MUI X日期范围选择器依赖与运行问题

问题根源

@material-ui/pickers 已被官方废弃，现在MUI的日期类组件统一归到 MUI X 生态下，且MUI X版本必须与你项目中的@mui/material版本严格匹配，版本不兼容是导致报错的核心原因。

修复步骤

清理冲突依赖
先卸载已安装的错误包：
```
npm uninstall @material-ui/pickers
```
安装匹配版本的MUI X依赖
先确认你项目中@mui/material的版本：
```
npm list @mui/material
```
- 如果是MUI v5.x：安装MUI X v6.x稳定版
```
npm install @mui/x-date-pickers-pro @mui/x-date-pickers dayjs
```
  （dayjs是日期适配器，也可替换为moment、date-fns，选你项目常用的即可）
- 如果是MUI v4.x：只能安装MUI X v5.x版本（v6不再兼容v4）
```
npm install @mui/x-date-pickers-pro@5.0.20 @mui/x-date-pickers@5.0.20 dayjs
```

修正代码导入与结构
官网部分旧示例可能存在导入路径错误，以下是可直接运行的完整示例（以Dayjs适配器为例）：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { TextField } from '@mui/material';

export default function DateRangePickerDemo() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangePicker
        startText="开始日期"
        endText="结束日期"
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} sx={{ ml: 2 }} />
          </>
        )}
      />
    </LocalizationProvider>
  );
}