创建一个 Typescript/React/Styled-Components 按钮

Question

I created a simple styled-components <Button> :

interface IButtonProps {
    danger: boolean,
    isLoading: boolean,
    primary: boolean
}

export const Button = styled.button<IButtonProps>`...`

But when trying to use it:

<Button onClick={fight}>FIGHT!</Button>

The Button gives the error:

Type '{ children: string; onClick: () => void; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | "style" | "title" | "key" | "children" | "className" | "color" | "id" | ... 256 more ... | "value"> & { ...; } & ButtonProps, "form" | ... 267 more ... | "primary"> & Partial<...>, "form" | ... 267 more ... | "prim...': danger, isLoading, primaryts(2739)

I tried a few things including extending React.ButtonHTMLAttributes<HTMLButtonElement> with no luck.

Answer 1

You declared danger , isLoading and primary as mandatory props but you didn't declared its. You should do:

<Button primary={false} danger={false} isLoading={false} onClick={fight}>FIGHT!</Button>

Or declare in your interface that props can be optional with question mark like that:

interface IButtonProps {
    danger?: boolean,
    isLoading?: boolean,
    primary?: boolean
}