Styled Componentsとは？
根強い人気があって今でも人気上位のReact CSSライブラリになります。
メリット
sassと同じ記法で記述ができ、hoverなどが使える。（普通のcssがデフォルトで拡張されている。）、なのでsassからReactに置き換える際などの移行にも便利だったりします。
デメリット
スタイルを当てたコンポーネントなのか、importしたコンポーネントなのかがぱっと見で非常にわかりづらいです。なので人によってはスタイルを当てたコンポーネントに関してはコンポーネント名の先頭に「S」をつけるなどしてぱっと見わかるようにしていたりもします。
インストール
|
1 |
npm install styled-components |
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import styled from "styled-components"; function StyledComponents() { return ( <> <Cotainer> <p>- StyledComponents -</p> <button>- StyledComponents -</button> </Cotainer> </> ); } const Cotainer = styled.div` border: solid #000 1px; border-radius: 10px; `; |
スタイルの共通化（というか継承）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function StyledComponents() { return ( <> <MainCotainer> <p>- StyledComponents -</p> <button>- StyledComponents -</button> </MainCotainer> </> ); } const BaseCotainer = styled.div` border: solid #000 1px; border-radius: 10px; `; const MainCotainer = styled(BaseCotainer)` background-color: #555; `; |
「styled(継承元スタイル)」という感じで新しいスタイルを定義することでスタイルを継承して別スタイルとして定義することも可能です。
ユースケース
ほぼ同じようなボタンだけど背景色だけ変えたいみたいな要求があったとした場合に共通化するために使ったりします。
この記事へのコメントはありません。