TypeScript error when using `styled()` on complex polymorphic components

[sirianni]

I'm getting TypeScript errors when using styled() to wrap complex polymorphic components - for example, when wrapping Mantine <Text> component.

https://codesandbox.io/p/devbox/emotion-issue-template-forked-hd8jqv

import styled from "@emotion/styled";
import { MantineProvider, Text } from "@mantine/core";

const Wrapper = styled(Text)`
  p {
    margin: 0;
  }
`;

export default function App({ content }: { content: string | undefined }) {
  return (
    <MantineProvider>
      <Wrapper component="div" size="sm">
         Hello world!
      </Wrapper>
    </MantineProvider>
  );
}

I get this error

Type '{ children: string; component: string; size: string; }' is not assignable to type 'IntrinsicAttributes & { theme?: Theme | undefined; } & { children?: ReactNode; }'.
  Property 'component' does not exist on type 'IntrinsicAttributes & { theme?: Theme | undefined; } & { children?: ReactNode; }'.