Setting "as" on an extended styled component removes the existing styles

[Adam-Collier]

Came across this issue when I wanted to extend a Stack component (which is a styled component) and change it to a different tag, only to find that the base styles that were supposed to be extended were removed.

You can try it out for yourself here:
https://stackblitz.com/edit/nextjs-yrwh2y?file=pages%2Findex.js

the "as" value is currently set to "section" and you can see there is no gap between the items. Once you remove the "as" it works as it should (but with the wrong tag). I'd have thought we would still be able to use the "as" prop when extending an existing styled component, so thought I would bring it up

[cristianbote]

Hey @Adam-Collier, looking into it. Thanks for reporting!

[cristianbote]

Hey @Adam-Collier sorry for being MIA but took another look and it seems that you fixed it by having a wrapper defined and passing as prop to it?

[Adam-Collier]

Hey @cristianbote no need to apologise! Amazing stuff getting a fix out there, perfect timing too