ロゴWeb開発ブログ

Chakra UIコンポーネントのContainerとCenterの違い

作成
  • 使用したバージョン
  • @mui/material 5.13.6

Chakra UIのContainerとCenterはどちらも中央寄せするコンポーネントのため同じように思えるが使いかたが異なる。

Containerコンポーネント

Containerはその要素自体が中央寄せとなる。

これは左右のmarginにautoが指定されているためである。

中央寄せされるのは横軸のみ。

デフォルトでmax-widthが60chとなっており、左右にpaddingが付けられている。

styleは次のようになっている。


width: 100%;
margin-inline-start: auto;
margin-inline-end: auto;
max-width: var(--chakra-sizes-prose);
padding-inline-start: var(--chakra-space-4);
padding-inline-end: var(--chakra-space-4);

また、propsのcenterContentをtrueにすると子要素も中央寄せとなる。

これも中央寄せされるのは横軸のみ。

これはflex要素となったためである。


width: 100%;
margin-inline-start: auto;
margin-inline-end: auto;
max-width: var(--chakra-sizes-prose);
padding-inline-start: var(--chakra-space-4);
padding-inline-end: var(--chakra-space-4);
display: flex;
flex-direction: column;
align-items: center;

Centerコンポーネント

Centerは子要素が中央寄せされる。

横軸縦軸ともに適用される。

styleは単純にflexで中央寄せしてるだけ。


display: flex;
align-items: center;
justify-content: center;

使い分けとしては、Containerは子要素が複数ある全体のレイアウトや複数行の文章を左右中央寄せしたい場合に使用して、

Centerは上下左右中央寄せしたい場合にはどこでも使用できる。


<Center>
<Heading>ContainerとCenterの違い</Heading>
</Center>
<Container maxWidth='sm'>
<Text>Containerはその要素自体が中央寄せとなる。</Text>
<Text>これは左右のmarginにautoが指定されているためである。</Text>
<Text>中央寄せされるのは横軸のみ。</Text>
<Text>デフォルトでmax-widthが60chとなっており、左右にpaddingが付けられている。</Text>
</Container>