Material-UI 4.9.10兼容最新MUI日期选择器问题求助

核心问题 #

最新版@mui/x-date-pickers属于MUI X组件库，是为**Material-UI 5+**设计的，和Material-UI 4.9.10的依赖、组件API存在兼容性冲突，直接使用会导致渲染错误。

解决方案 #

有两种可行方案，根据项目需求选择：

方案1：使用适配Material-UI 4的日期选择器包

Material-UI 4有官方配套的日期选择器@material-ui/pickers，完全兼容4.9.10版本，步骤如下：

1. 安装依赖（注意指定适配器版本为1.x，适配Material-UI 4）：

npm install @material-ui/pickers dayjs @date-io/dayjs@1.x

2. 修改代码替换为旧版API：

import React from 'react';
import dayjs from 'dayjs';
import TextField from '@material-ui/core/TextField';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DayjsUtils from '@date-io/dayjs';
import { DateTimePicker } from '@material-ui/pickers';

export default function MaterialUIPickers() {
  const [value, setValue] = React.useState(
    dayjs('2014-08-18T21:11:54'),
  );

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <MuiPickersUtilsProvider utils={DayjsUtils}>
      <DateTimePicker
        label="Date&Time picker"
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
    </MuiPickersUtilsProvider>
  );
}

方案2：升级Material-UI到5.x版本（若项目允许）

如果项目可以升级依赖，直接将@material-ui/core升级到5.x（包名改为@mui/material），即可正常使用最新版@mui/x-date-pickers。需要注意：

• 替换所有导入路径（如@material-ui/core/TextField → @mui/material/TextField）
• 调整部分组件API（MUI 5对部分组件的props做了调整）

关键说明 #

• @mui/x-date-pickers不再支持Material-UI 4，官方已将维护重心转移到MUI 5生态
• @material-ui/pickers是Material-UI 4的官方日期选择器，功能完整且兼容稳定

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