Correct types for useField Formik Hook with Typescript, MaterialUI and styled-components

Viewed 319

I am creating a custom Formik input in a frontend with React, MaterialUI, styled-components, and Typescript. I am using the following code

const TextField = styled(MuiTextField)<{ my?: number }>(spacing);

export const FormikInput: React.FC<FieldAttributes<Record<string, unknown>>> = props => {
  const [field, meta] = useField(props);

  return (
    <TextField
      {...field}
      {...props}
      error={meta.touched && Boolean(meta.error)}
      helperText={meta.touched && meta.error}
    />
  );
};

It is working fine, but I'd like to pass in a more specific type to my React.FC. I tried React.FC<typeof TextField & FieldProps> but I get an error saying

Type '{ type: string; name: string; label: string; fullWidth: true; my: number; }' is not assignable to type 'string'. TS2322

I get the same error when trying with React.FC<FieldAttributes< typeof TextField & FieldProps>>

Any thoughts on properly typing a component using Formik's useField combined with MaterialUI and styled-components?

0 Answers
Related