Nested 'as' loses styling

Environment

	## System:
	 - OS: macOS 10.14.1
	 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
	 - Memory: 816.95 MB / 16.00 GB
	 - Shell: 5.3 - /bin/zsh
	## Binaries:
	 - Node: 8.12.0 - /usr/local/bin/node
	 - Yarn: 1.2.0 - ~/.yarn/bin/yarn
	 - npm: 6.4.1 - /usr/local/bin/npm
	## npmPackages:
	 - babel-plugin-styled-components: ^1.8.0 => 1.8.0
	 - styled-components: ^4.1.2 => 4.1.2

Reproduction

I am trying to create a UI Kit in which a bunch of typography ‘atoms’ are styled-components.

I’ve decided to make a <Base> styled component which houses a group of default styles and behaviours that all other elements can use, ‘extend’ and override.

I’m having an issue which I can work around but I would like to understand why it doesn’t work.

https://codesandbox.io/s/mj3m9p3jyj

Steps to reproduce

• I setup a base styled component which renders a span and a few styles. It has some default props that can be overridden and passed through.
• Next I setup a <HeadingOne> element using a functional component so I can set new default props for this element. I sometimes also set propType checks at this point if required.
• Finally, I use that <HeadingOne> element to create a <Title> but want it to be blue and a <h2>. Doing a normal extension such as adding color: blue works perfectly but when I set the as prop it loses all styles from the <HeadingOne> and the <Base> elements.

Expected Behavior

Element should inherit HeadingOne, Base and Title styling.

Actual Behavior

Element loses HeadingOne & Base styling but keeps Title styling.

[JamesBliss]

@probablyup and @mxstbr thanks so much for getting back to me

I thought it would be some sort of weird implementation / usage thing. Inline with the advice above surrounding making a shared css declaration my solution is:

https://codesandbox.io/s/qzo5vox3y6

Hopefully this can help anyone else who has this issue. If anyone has any more advice for improving it that would be great 😁!

[probablyup]

styled(StyledComponent) === extend styled(OtherComponentMaybeWithStyledComponentInside) === withComponent

as === render something else, with the same props and generated styling class name