ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

これまでの理解が「なんとなく styled() でラップされるコンポーネントにはclassName props用意しておけばいいや」みたいな
おまじない感覚だったので調べたことをメモしておく

styled-componentとclass

https://www.styled-components.com/docs/advanced#existing-css

styled-components generates an actual stylesheet with classes, and attaches those classes to the DOM nodes of styled components via the className prop. It injects the generated stylesheet at the end of the head of the document during runtime.

とあるので、実行時にスタイルを追記するためのクラスがinjectされるらしい。   なのでclassNameを受け取れるようになっていないと、スタイルがoverrideできない場合がある。
(https://www.styled-components.com/docs/advanced#styling-normal-react-components

TyepScriptとの組み合わせ

https://www.styled-components.com/docs/api#caveat-with-classname

  • className?: string を用意しておく必要がある

    • 型にはないけど <Component {...props} /> と書いておけばclassのinjectは動くけど {...props} がおまじないみたいになる
    • Atomic Designの Atoms / Moleculesあたりの、呼び出し側でスタイルがoverrideされそうな場合はそれ用に型を拡張するとスマートそう
    • 参考: https://qiita.com/Takepepe/items/f66c7e2e1d22b431f148

This content is built with Gatsby