Using withComponent('tag') on styled(Component) removes styling

Version

2.2.3

Reproduction

codesandbox: https://codesandbox.io/s/2xwzowxx3j

const BaseComponent = styled.div`
  background: black;
  padding: 10px;
  color: red;
`

export const ComponentFromDifferentFile = styled(BaseComponent)`
  margin: 5px;
`.withComponent('p')

export const ComponentFromSameFile = BaseComponent.extend`
  margin: 5px;
`.withComponent('p')

Expected Behavior

I would assume that both ComponentFromDifferentFile, ComponentFromSameFile should still have the styling from BaseComponent.

Actual Behavior

ComponentFromDifferentFile does not have the style from BaseComponent. This only happens if I use withComponent.

[petergombos]

@philpl Thanks for the quick reply! Could you perhaps suggest a way I should approach this then? How can I change a styled(component)'s html tag?

[kitten]

When you call styled(BaseComponent) it doesn’t extend the BaseComponent but instead wraps it in another styled component.

So calling withComponent on the outer styled component will replace BaseComponent with "p" instead of replacing "div" in the child styled component.