React CSS

styled-componentsを使ったCSS設計

出典:styled-componentsを使ったCSS設計 – Qiita JSでstyleを記述するCSS in JSのライブラリで、2017年12月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。

コンポーネントとstyleのマッピングが無くなる

出典:styled-componentsを使ったCSS設計 – Qiita

styled-componentsで定義するスタイル(= styled-component)はReactのコンポーネントそのものです。この仕組みにより、スクレイピング的なスタイリングではなく、レゴブロックを組み立てるようにUIを構築していくことができます。

// styled-components以前
<Button className='button'></Button>
<Button className='button button--primary'></Button>

// styled-components
<Button><Button/>
<Button primary></Button>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です