みかづきブログ・カスタム

基本的にはちょちょいのほいです。

TypeScript + styled-componentsにpropsを渡す 🎁

f:id:kimizuka:20210103011013j:plain

公式のAPIリファレンスTypeScriptとカスタムpropsを組み合わせて使う方法が記載されてました。

styled-components.com

シンプルなものであれば、

const Text = styled.p<{ color: string }>`
  color: ${ ({ color }) => color };
`;

という感じで定義できます。(propsをそのままプロパティに渡すケースは少ないと思いますが)

<Text color="#F00">Ya-Ha-!</Text>

使う時は、こんな感じです。非常にシンプルです。



こちらでいろいろと議論されている様子が確認できますが、最後のコメントで公式のリファレンスへのリンクで締められているので、なにか歴史的経緯があったものの、現状はシンプルに使えるようになったのかもしれません。

github.com