Extending props of styled components
Today I wanted to use a styled-component at the top level of my own TypeScript component. And it was not nice. I got type collisions all the time. But it tuns out it’s quite simple if I extend from the props of the styled component.
const StyledButton = styled.button<{ variant?: 'small' | 'large' }>`
// styles here
`
interface ButtonProps extends React.ComponentProps<tyepof StyledButton> {
variant?: 'default' | 'small' | 'large'
}
function Button({children, variant = default, ...otherProps}) {
return <StyledButton variant={variant} {...otherProps}>
{children}
</StyledButton>
}