styled-componentsでカスタム要素にスタイルを適用する

#styled-components #React #CSS

はじめに

普段styled-componentsを使う際、styled.divやstyled.pのように基本のHTMLタグにしか使ったことがなく、自作したコンポーネントに対してスタイルを適用したことがなかったので備忘録として残しておく。

方法

スタイルを適用したいコンポーネントにpropとしてclassNameを持たせるようにしておくことで、いつものstyledを使って独自コンポーネントに対してもスタイルを適用させることができる。

const MyComponent = ({ className }) => (<div className={className}>component</div>)

const StyledComponent = styled(MyComponent)`
  background-color: red;
  font-size: 24px;
`

react-nativeを使っている際はclassNameではなく、styleらしいので注意。

おわり

公式ドキュメントは以下。Basicsの章の最初の方に書かれていた。ドキュメントを見るの大事。