Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeScript definitions for `styled` miss `target` prop for material ui Button

See original GitHub issue

Current behavior:

When using styled (either from @emotion/styled or via @mui/material) to style <Button> from @mui/material, TypeScript complains about target prop. It does not complain about the prop on bare <Button>.

The prop works as expected though, the error is only with TypeScript.

To reproduce:

Reproduction provided by Material UI team at https://github.com/mui/material-ui/issues/31314#issuecomment-1067776719

https://codesandbox.io/s/hardcore-danilo-0e086c?file=/src/App.tsx

Wrap <Button> with styled
Use new component with target prop

TS reports this error:

Type '{ children: string; variant: "outlined"; href: string; target: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & ... 4 more ... & { ...; }'.
  Property 'target' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & ... 4 more ... & { ...; }'

This can be workarounded with styled(Button)(....) as unknown as typeof Button.

Expected behavior:

Prop works w/o TypeScript errors.

Environment information: