styled-componentsでforwardedAsを使ってコンポーネント拡張した上でタグを変更する

qiita.com

<EventButton forwardedAs="p">
  dummydummy
</EventButton>

const EventButton = styled(Button)`
  width: 320px;
  height: 53px;
`

↑pages/page.tsx

export const Button = (props: Props, as: any) => {

<Container
  forwardedAs={as}
>

const Container = styled.button``

↑Button.tsx

これで、buttonタグで作られているforwardedAsでpタグに変えた上でButtonコンポーネントを拡張出来る。ただ単にas="p"とすると、スタイルが継承されないみたい。