CSS in JS について

Posted on by しましま

こんにちは、しましまです。
参画中の案件が、React を採用しており、CSS in JS を利用して実装しています。
CSS in JS の経験がなかったので、調べたことをこちらにまとめます。

CSS in JS とは

JavaScript で CSS を記述し、それをコンポーネントのスタイルとして定義する手法です。
実際のコードは以下のようなものになります。

<Button $background="#CCCCCC" width="100%" height="30px">ボタン</Button>

const Button = styled.button<Props>`
  position: relative;
  background: ${(props: Props) => props.$background};
  width: ${(props: Props) => props.width};
  height: ${(props: Props) => props.height};
  border: none;
`

上記は、CSS in JS のライブラリの一つである styled-components で記述したコードです。
ボタンのスタイルを指定しており、スタイルを呼び出す側が背景色、横幅、高さを指定できるようになっています。

さわってみての所感

まだまだ使いこなせてはいませんが、js のコードなので、値を渡せるのが便利だと感じました。
また、作成したスタイルのみを export することもできるので、管理がしやすいと感じました。
既存のスタイルを継承して拡張することができる点も便利でした。

不便な点としては、私の経験不足が主だと思いますが、独特な書き方があるということです。
input タグなどは、type 属性や maxLength 属性なども styled-components で記述するため、不慣れなこともあり、苦戦しました。

さいごに

さわっていて便利だと感じることが多く、使っていて楽しいです。
スタイルは命名する必要があるため、また違ったところで悩むことが増えましたが、早く使いこなせるようになりたいです。