TS types for `styled` and `Button` are not compatible: target attribute is not recognized

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If I use styled override with Button component, TS suddenly complains about target prop, though it works fine with bare Button from material.

const MyButton = styled(Button)({
  color: 'red'
});

export default function App() {
  return (
    <MyButton
      variant="outlined"
      href="https://google.com"
      target="_blank"
    >
      Google
    </MyButton>
  );
}

The error is:

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 ... & { ...; }'

However, the rendered component works as expected. Currently I work around this problem with styled(Button)(....) as unknown as typeof Button.

Expected behavior 🤔

I expected styled-wrapper support all props the wrapped component supports, in this case — target.

Steps to reproduce 🕹

https://codesandbox.io/s/romantic-allen-3qyg7b

Open App.tsx in code sandbox and see the error reported on target prop on MyButton. The identical usage of plain Button gives no errors.

Context 🔦

I am trying to customize Button using styled from @mui/material.

Your environment 🌎

See codesandbox

[mnajdova]

Makes sense, now that I think about it, we had similar issues before, for example https://github.com/mui/material-ui/issues/21727#issuecomment-869228390

I don’t think we can do much better, so I would propose casting the styled component:

const MyButton = styled(Button)({
  color: "red"
}) as typeof Button;

See https://codesandbox.io/s/reverent-jennings-ldwick?file=/src/App.tsx. We should add this on our TypeScript guide to avoid duplicated issue in the future. Thanks everyone for the help.

[mnajdova]

The docs was updated in https://github.com/mui/material-ui/pull/32168, I am closing this.