Use with styledComponents.withComponent

[ghost]

Is there a way to use this with Styled Component's withComponent method?

I've tried various takes but consistently get type mis-match errors.

import styledComponents from 'styled-components'
import styledComponentsTS from 'styled-components-ts';

interface ButtonProps {
  color: string
}

export const Button = styledComponentsTS<ButtonProps>(styledComponents.a)`
  border: none;
  background-color: ${props => props.color };
`

interface BorderedButtonProps extends ButtonProps {
  borderColor: string
}

export const BorderedButton = styledComponentsTS<BorderedButtonProps>(Button.extend)`
  border: 2px solid ${props => props.borderColor };
`

// Ideally output a link ("<a>")
export const ButtonLink = styledComponentsTS<ButtonProps>(Button.withComponent('a'))`
  border: 2px solid ${props => props.borderColor };
`

[jacob-ebey]

I've added an example showing how to do this at: https://github.com/jacob-ebey/styled-components-ts/blob/master/examples/WithComponent.ts

If you still have an issue or the output isn't what you expect, let me know. The trick is to pass Button.withComponent('a').extend to the styledComponentsTS function.

[lukebowerman]

Thanks very much Jacob!