UI コンポーネントにマージンを付けずに実装する - Chakra UI の場合 - - Qiita

この記事は、React Advent Calendar 2021 1 日目の記事です。 定期的に話題になる、UI コンポーネントでの余白 (margin, padding) をどうするか問題。 昨日も Zenn に解説記事が流れてきました。 (参照記事の参照記事) Zenn の記事の中で、UI ライブラリーにはレイアウト (Box モデル) が当たり前に存在する と記載がされています。 (※一部引用) 例えば、Chakra UIではレイアウト(Boxモデル)に特化したコンポーネントが存在します。 Chakraのレイアウトの責務を持ったコンポーネントの豊富さは大変魅力的ですね。 そう、Chakra UI のレイアウト関連コンポーネントは、大変魅力的なのです・・・！ ということで、マージンを持たない UI コンポーネントを Chakra UI で作ってみようと思います。 保険 React を仕