TypeScript error when component renders a styled component

Current behavior: I’m using styled to create a button. In my implementation, my button is a function component that returns a styled component.

TypeScript throws an error when I use it.

To reproduce: My button implementation

// Button.tsx

type Size = "small" | "medium" | "large";

type ButtonProps = {
  size?: Size;
  kind?:
    | "primary"
    | "text-primary"
    | "cta"
    | "gray"
    | "danger"
    | "danger-neutral"
    | "warning";
  link?: boolean;
};

const ButtonStyled = styled.button`
/* styles */
`
const Button = (props: ButtonProps) => <ButtonStyled {...props} />

export default Button;

import Button from 'Button.tsx';

// tsx does not complain
<Button size='small'></Button>
// tsx does not complain
<Button>foo</Button>
// tsx complains
<Button size='small'>foo</Button>

Type '{ children: string; size: "small"; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<ButtonProps, "size" | "link" | "kind"> & Pick<InferProps<{ size: Requireable<string>; kind: Requireable<string>; link: Requireable<...>; }>, never> & Pick<...>, never> & Partial<...> & Partial<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & Pick<Pick<ButtonProps, "size" | "link" | "kind"> & Pick<InferProps<{ size: Requireable<string>; kind: Requireable<string>; link: Requireable<...>; }>, never> & Pick<...>, never> & Partial<...> & Partial<...>'

• react version: 16.12.0
• emotion version: 10.0.27

[jonavila]

@criles25 React types exposes ComponentProps type. It will extract the types of a component, so no need to manually add HTMLProps. I would try:

const Button: React.FC<ButtonProps & React.ComponentProps<'button'>> = (props) => <ButtonStyled {...props} />

[criles25]

The solution is to use the React.HTMLProps.

const Button: React.FC<ButtonProps & React.HTMLProps<HTMLButtonElement>> = (props) => <ButtonStyled {...props} />