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

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

TypeScript + styled-componentsにpropsを渡す 🎁

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

styled-components.com

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

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

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

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

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



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

github.com