如何为Material UI TextField的自定义inputComponent传递自定义props？

报错原因 #

MUI的inputComponent属性要求传入组件类型（函数/类组件），而非直接渲染的JSX元素（<CustomerSocialMask .../>属于已实例化的元素对象），直接传JSX会触发类型校验错误。

解决方案1：使用inputProps传递自定义props（推荐） #

MUI的Input组件会自动将InputProps.inputProps中的属性传递给inputComponent指定的组件，这是官方推荐的传参方式，无需修改自定义组件的封装逻辑，只需在配置中添加inputProps：

// 自定义组件保持原有逻辑，确保能接收自定义props
const CustomerSocialMask = React.forwardRef<HTMLElement, CustomProps>(
  function CustomerSocialMask(props, ref: any) {
    // 解构出自定义属性customProp
    const { onChange, customProp, ...other } = props;
    
    // 可在此处使用customProp做逻辑处理
    console.log('接收的自定义属性:', customProp);

    return (
      <IMaskInput
        {...other}
        mask="000.000.000-00"
        definitions={{
          '#': /[1-9]/,
        }}
        inputRef={ref}
        onAccept={(value: any) =>
          onChange({ target: { name: props.name, value } })
        }
        overwrite={false}
      />
    );
  },
);

// TextField组件配置修改
<MuiTextField
  sx={{
    '& input[type=number]': { MozAppearance: 'textfield' },
    '& input[type=number]::-webkit-outer-spin-button': { WebkitAppearance: 'none', margin: 0 },
    '& input[type=number]::-webkit-inner-spin-button': { WebkitAppearance: 'none', margin: 0 },
  }}
  variant="standard"
  multiline={data.fieldType === FieldType.LONG_TEXT}
  placeholder={data.settings.placeholder}
  fullWidth
  type={inputType}
  InputProps={{
    startAdornment: prefix && (
      <InputAdornment position="start">
        <Typography color="text.primary">{prefix}</Typography>
      </InputAdornment>
    ),
    endAdornment: suffix && (
      <InputAdornment position="end">
        <Typography color="text.primary">{suffix}</Typography>
      </InputAdornment>
    ),
    inputComponent: CustomerSocialMask,
    // 在这里传递自定义props
    inputProps: {
      customProp: something // 替换为你的自定义属性值
    }
  }}
  name={name}
  onChange={
    (data.settings as ShortTextSettings).valueType === ValueType.CURRENCY || path === PersonalDetail.PHONE
      ? onChange
      : handleChange
  }
  onBlur={handleBlurWithFix}
  value={valueAdjusted}
  error={!!error}
  helperText={error}
/>

解决方案2：封装高阶组件动态绑定props（灵活场景） #

如果需要动态生成带有固定props的组件，可以封装一个工厂函数，返回绑定了自定义props的组件：

// 工厂函数：接收自定义props，返回带props的forwardRef组件
const createSocialMaskWithProps = (customProp) => {
  return React.forwardRef<HTMLElement, Omit<CustomProps, 'customProp'>>((props, ref) => {
    return <CustomerSocialMask {...props} ref={ref} customProp={customProp} />;
  });
};

// TextField中使用
<MuiTextField
  // 其他属性不变
  InputProps={{
    // ...其他配置
    inputComponent: createSocialMaskWithProps(something)
  }}
/>

注意事项 #

• 方案1是MUI官方设计的传参方式，更符合组件复用规范，优先使用。
• 确保TypeScript的CustomProps类型包含你要传递的自定义属性，避免类型错误。

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