The blog of developer Timo Zöller

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}>