垂直方向のmarginの指定のみが責務

水平方向は責務外

これが重要で、これを意識するとかなりシンプルに書ける

marginは文脈に基づいて適用することを上手くやっている

例

例外対応

Stackの子の中で1要素だけ特殊な位置に置きたいときの対応

模したもの

propsで、垂直方向・水平方向のいずれもサポートしている

実装をみればわかるが、責務が大きすぎる

子を <StackItem> で囲んで並べるという処理をmapで行っている

style都合でHTML要素が増えている

styleで一瞬で書けるものも大仰にJSで実装している感がある

適当に書いたやつ

参考