Material UI + Typescript 下DatePicker组件color属性类型不兼容问题

核心问题是依赖版本混用冲突，你当前项目同时安装了两套Material UI版本：

• MUI v4：包名前缀为@material-ui，对应版本4.12.3
• MUI v5：包名前缀为@mui，对应版本5.2.2

你使用的DesktopDatePicker来自MUI v5的@mui/lab，它在renderInput回调中返回的props是适配MUI v5标准TextField的类型定义，但你引入的TextField是MUI v4的@material-ui/core/TextField，两个大版本的组件Props定义差异很大，尤其是InputLabelProps中的color等属性类型不兼容，所以会触发类型报错。

你可以选择以下任意一种方案解决问题：

方案1：全量统一使用MUI v5 #

1. 移除所有@material-ui前缀的依赖：

npm remove @material-ui/core @material-ui/lab
# 或yarn remove @material-ui/core @material-ui/lab

2. 将TextField的导入路径替换为MUI v5的路径：

import TextField from '@mui/material/TextField';

3. 检查其余用到@material-ui组件的地方，全部替换为@mui对应组件即可。

方案2：统一使用MUI v4的日期组件 #

如果当前项目暂时无法全量升级到MUI v5，就把日期相关组件全部替换为v4版本的实现：

1. 移除@mui/lab依赖：

npm remove @mui/lab
# 或yarn remove @mui/lab

2. 把日期相关组件的导入路径全部替换为@material-ui/lab：

import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
import DesktopDatePicker from '@material-ui/lab/DesktopDatePicker';

你当前代码中onChange的类型断言newValue as string存在风险，建议根据你定义的DatePickerProps中value的类型，将onChange的入参类型调整为Date | null，和官方组件的返回值类型对齐，避免后续运行时报错。

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