将@mui/lab DatePicker迁移至@mui/x-date-pickers遇TypeScript类型错误

将DatePicker组件从@mui/lab更新至@mui/x-date-pickers/后，TypeScript对renderInput属性报类型错误。官方文档内容似乎已过时，尝试多种方法（包括官方基础示例）均无法解决该问题。

代码示例 #

import React, { FC } from 'react';
import { styled, TextField } from '@mui/material';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';

export interface DatePickerProps {
  value: Date | null;
  placeholder?: string;
  isMobile: boolean;
  onChange: (
    value: Date | null,
    keyboardInputValue?: string | undefined,
  ) => void;
}

const StyledTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputAdornment-root': {
    marginRight: theme.spacing(1),
  },
}));

export const DatePicker: FC<DatePickerProps> = ({
  value = new Date(),
  placeholder,
  isMobile,
  onChange,
}) => {
  const DatePickerComponent = isMobile ? MobileDatePicker : DesktopDatePicker;
  return (
    <DesktopDatePicker
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      date={value}
      value={value}
      onChange={onChange}
      inputFormat='dd/MM/yyyy'
      renderInput={params => (
        <StyledTextField
          {...params}
          InputProps={{
            ...params.InputProps,
            sx: {
              padding: 1,
            },
            inputProps: {
              ...params.inputProps,
              placeholder,
              sx: { paddingTop: 1 },
            },
          }}
        />
      )}
    />
  );
};

错误信息 #

Type 'SystemCssProperties<Theme>' is not assignable to type 'SystemStyleObject<Theme> | CssVariableType | ((theme: Theme) => string | number | SystemStyleObject<Theme>)'.ts(2322)

解决方案 #

1. 移除冗余属性：@mui/x-date-pickers的DatePicker组件无需date属性，直接使用value即可，删除date={value}和//@ts-ignore注释。
2. 修正样式写法：错误根源是inputProps中直接传入sx导致类型不匹配。TextField的inputProps不支持直接设置sx，需将输入框的样式移至InputProps的sx中，通过嵌套选择器& input来设置输入框自身样式。
3. 使用动态组件：代码中定义了DatePickerComponent但未使用，需替换return中的DesktopDatePicker为DatePickerComponent。

修改后的核心代码部分：

export const DatePicker: FC<DatePickerProps> = ({
  value = new Date(),
  placeholder,
  isMobile,
  onChange,
}) => {
  const DatePickerComponent = isMobile ? MobileDatePicker : DesktopDatePicker;
  return (
    <DatePickerComponent
      value={value}
      onChange={onChange}
      inputFormat='dd/MM/yyyy'
      renderInput={(params) => (
        <StyledTextField
          {...params}
          placeholder={placeholder}
          InputProps={{
            ...params.InputProps,
            sx: {
              padding: 1,
              '& input': {
                paddingTop: 1,
              },
            },
          }}
        />
      )}
    />
  );
};

这样调整后，类型报错即可解决，同时代码逻辑也更符合@mui/x-date-pickers的使用规范。

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