Wrong prop types in styled withComponent component

[MikelArnaiz]

Current behavior:

Appying styled to the result component of .withComponent() has the wrong prop types.

E.g in the following code, typescript complains that onSubmit might be of type (event: FormEvent<HTMLDivElement>) => void). I guess that the HTMLDivElement part is comming from the original Box component, which was a div:

const Box = styled.div`
  border: 1px solid red;
`;

const FormBox = Box.withComponent("form");

const Form = styled(FormBox)`
  background-color: "white";
`;

const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  ev.preventDefault();
  console.log("onSubmit");
};

export const App = () => {
  return (
    <Form onSubmit={onSubmit}>
      <input type="submit" value="Submit" />
    </Form>
  );
};

Note the type of FormBox, references to HTMLDivElement are still there.

Full error message:

Type '(ev: React.FormEvent<HTMLFormElement>) => void' is not assignable to type '((event: FormEvent<HTMLFormElement>) => void) & ((event: FormEvent<HTMLDivElement>) => void)'.
  Type '(ev: React.FormEvent<HTMLFormElement>) => void' is not assignable to type '(event: FormEvent<HTMLDivElement>) => void'.
    Types of parameters 'ev' and 'event' are incompatible.
      Type 'FormEvent<HTMLDivElement>' is not assignable to type 'FormEvent<HTMLFormElement>'.
        Type 'HTMLDivElement' is missing the following properties from type 'HTMLFormElement': acceptCharset, action, autocomplete, elements, and 12 more.

To reproduce:

1. Clone this repo
2. yarn install
3. yarn start

Expected behavior:

Component props types should be of the end html element type.

Environment information:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"typescript": "~3.7.2"
"@emotion/core": "^10.0.35",
"@emotion/styled": "^10.0.27",

Workaround

Until fixed a possible workarround is to cast the event as any:

    <Form onSubmit={(ev: any) => {
      onSubmit(ev)
    }}>

[Andarist]

This has been fixed in the upcoming v11. It's available on npm and no major breaking changes are planned before the final release - please try it out or wait until we release it.