React-Admin中使用Material UI DateRangePicker的React版本兼容问题

不用降级React到16/17，你遇到的问题本质是选错了组件包：@material-ui/pickers是Material UI v4的组件库，和你项目里的MUI v5（@mui/material、@mui/icons-material）以及React18都不兼容，它的peer依赖确实只限制了React16/17版本。

推荐以下两种方案，优先选第一种：

方案一：使用MUI v5官方的日期范围选择器（推荐） #

MUI v5将日期组件拆分到了独立的包中，日期范围选择属于Pro版功能，对应包是@mui/x-date-pickers-pro，完全支持React18，且和你现有的React-Admin4、MUI5技术栈完美兼容。

1. 安装依赖

npm install @mui/x-date-pickers-pro @mui/x-date-pickers dayjs

（注：dayjs是日期适配器，你也可以替换成moment、luxon等，对应不同的适配器导入）

2. 基础使用示例

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

function CustomDateRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangePicker
        startText="开始日期"
        endText="结束日期"
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <span style={{ margin: '0 8px' }}>至</span>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
}

这个组件的API设计和MUI5保持一致，能无缝融入React-Admin的页面中，不会出现样式或功能冲突。

方案二：强制安装旧版组件（不推荐） #

如果你非要使用@material-ui/pickers，可以通过强制安装忽略peer依赖警告：

npm install @material-ui/pickers --force

但这种方式存在风险：MUI4和MUI5的样式系统、组件API差异极大，混用可能导致页面样式错乱、组件渲染异常，甚至和React-Admin的内置组件冲突，不建议在生产环境使用。

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