styled-componentsでレイアウトを組むあくまで一例・提案
レイアウトの組み方の一例(how to layout with styled-components)
今回、困ったのは
テーマやそれなりのレイアウトをスタイルしても
多くの場合可搬性がない。
例えば「このコンポーネントこっちに持ってきたらpadding調整しなきゃいけない。。」
とか
その場合
簡単にutilsとしてmt10(margin-top:10px)
などglobalにクラスをもち
デザインの微妙な違いを調整していたこともある
が、
デザイン上微妙な違いが多いと
細かいそれが邪魔になるケースも出てきた。
スタイルのpadding、marginに依存したコンポーネントが出来上がる
今回考えたのは
ルールとして
Paddingという名前のコンポーネントはpadingしか指定しなく
Marginならそれ
Strongならfont-size,color,font-weightしか持たなくさせ
それを組み合わせて作ればいいのではないかと思った
これは事例があまりなく、辛いケースが出てくるかもだが
コードを見たとき
どのpresentional componentが純粋にレイアウト崩れなしに利用できるかがわかる
atomic designを守れるような気がした
以下は作りかただが
説明
Paddingというコンポーネントは全てのコンポーネントのpaddingに責務を持つ
→Styleに依存しないミニマムなコンポーネントができる
例えば
export const Padding = styled.div`
padding-top: ${(props) => props.top}px;
padding-right: ${(props) => props.right}px;
padding-bottom: ${(props) => props.bottom}px;
padding-left: ${(props) => props.left}px;
`
Padding.defaultProps = {
top: 0,
right: 0,
bottom: 0,
left: 0
}
をutlisとして作り、
呼び出し側では
<Padding top={30} right={20} bottom={20} left={20}>
<Some />
</Padding>
<Padding top={10} right={10}>
<Some />
</Padding>
こうすることでSomeはpaddingに依存しない原子なComponentとしてどこにでも置ける
感想
これがページ全体にあると「う」となるが、
上記でいうSomeが純粋なatomsなのはわかるし
ページ内のコンポーネントを適切に分けて別ファイルで管理すれば問題ないのではと思っている