styled-components + TypeScriptでコンポーネントが拡張できなかった

今回の問題

コンポーネントを作成して別ファイルにインポートして拡張したかったができなかった。

Paragraph.tsx

const Paragraph = styled.p`
  color: red;
`

export default Paragraph

こんなコンポーネントを作成した。
これをApp.tsxにインポートして拡張しようとしてこんな風にした。

App.tsx

import Paragraph from 'Paragraph'

const StyledParagraph = styled(Paragraph)`
  color: blue;
`

export default () => {
  return (
    <StyledParagraph>hoge</StyledParagraph>
  )
}

理想の結果：hoge
実際の結果：hoge

なぜ青くならない…。

原因と解決方法

原因は元になるコンポーネントに拡張後のクラス名が反映されていなかった。

<p class="Paragraphのクラス名 StyledParagraphのクラス名">hoge</p>
こうなってほしいのにdeveloperToolで確認すると
<p class="Paragraphのクラス名">hoge</p>
こうなっていたのが原因だった。

そのため、Paragraph.tsxでStyledParagraphのクラス名を受け取れるようにすればいいので、Paragraph.tsxを以下のように書き換えた。

Paragraph.tsx

interface propsInterface {
  className?: string
}

const Paragraph = styled.p`
  color: red;
`
const paragraph = (props: propsInterface) => {
  return <Paragraph className={props.className} />
}

export default paragraph

こうすることで拡張した後のstyleを反映させることができた。
実際の結果：hoge

あとがき
これがスマートで正しい解決策なのかは分からないが自分は解決することができたので、もし解決してない人がいれば参考にしてほしい。