MUI TextField通过inputComponent传自定义组件报错求助

尝试通过InputProps->inputComponent将自定义组件传入MUI TextField时，触发以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

试过使用createElement等方法均未解决，目前仅能通过分开传递组件与props、再调用createElement的方式实现功能，但希望采用inputComponent的原生方案。

相关代码片段：

componentProps={{
  dateFormat: 'dd MMMM yyyy',
  className: `form-control ${
    errors?.startedDate ? 'is-invalid' : ''
  }`,
  selected: field.value,
  popperClassName: 'popper_datepicker',
}}
component={DatePicker}

// 当前可行的实现方式
createElement(customComponent, {
  ...componentProps,
  name,
  onChange,
  value,
})

• 检查组件导入正确性
  确认DatePicker的导出类型：若组件为默认导出，需使用默认导入语法；若为命名导出，需对应使用花括号导入。错误的导入方式会导致传入inputComponent的是undefined或非组件对象，触发类型错误。示例：

  // 错误：默认导出使用命名导入
  import { DatePicker } from 'react-datepicker';
  // 正确：默认导出使用默认导入
  import DatePicker from 'react-datepicker';
  

• 确保传入组件而非实例
  inputComponent要求传入组件类/函数本身，不能传入渲染后的JSX实例。禁止写成inputComponent={<DatePicker />}，必须直接传递inputComponent={DatePicker}。

• 适配props传递逻辑
  MUI会自动向inputComponent传递TextField的核心props（如value、onChange、name），若自定义组件的prop名称不匹配（比如DatePicker用selected而非value），需要添加一层包装组件转换props：

  const WrappedDatePicker = (props) => {
    return <DatePicker selected={props.value} onChange={props.onChange} {...props} />;
  };
  
  // 在TextField中使用包装后的组件
  <TextField
    InputProps={{
      inputComponent: WrappedDatePicker,
      inputProps: componentProps // 传递DatePicker的额外自定义props
    }}
  />
  

• 排查高阶组件包装问题
  若DatePicker经过高阶组件处理，需确保最终传入的是纯组件函数/类，而非包含额外属性的对象。例如部分库的导出结构可能嵌套，需提取真正的组件：

  import DatePickerModule from 'xxx-library';
  const DatePicker = DatePickerModule.Component; // 提取真正的组件
  

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