Zenn
🔥

Material UI Box、Container、Typographyの違い

2022/03/02に公開
Material-UI
tech

はじめに

前回はMaterial UIの基本的な使い方についてご説明しました。

まだお読みになっていない方はもしよろしければご覧ください。

https://zenn.dev/tns_00/articles/zenn-material-ui-basics

今回はMaterial UIで主に使うことになる

Box、Container、Typographyの違い

についてまとめていきたいと思います。

目次

  • Box

  • Conatainer

  • Typography

  • まとめ

Box

まずはBoxです。

基本的にこれを使用することになると思います。

Boxはcomponentプロパティにhtml要素を設定することで要素を変更することが出来ます。
※何も記載がない場合、divとして表示されます。

<Box component="main"/>

componentプロパティは基本的にどのHTML要素にも対応しています。

<Box component="form">
<Box component="img" alt="" src=""/>
<Box component="span"/>
<Box component="a" href=""/>
<Box component="strong" href=""/>
<Box component="h1" href=""/>

Container

次にContainerです。

Containerは基本的にはBoxと同じです。

Boxとの違いは基本的に要素を真ん中に寄せたい場合で、CotainerプロパティのmaxWidthと一緒に使用します。

<Container
    maxWidth="xs"
/>

前回紹介したthemeを使ってブレイクポイントの変更も可能です。

Typography

最後にTypographyです。

Typographyはthemeのtypographyオブジェクトを使用することが出来ます。

基本的にはvariantプロパティを使用して要素と利用するthemeを設定します。

<Typography variant="h1">dammy text</Typography>

Variantの種類

Variantの種類は下記13種類です。

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • subtitle1
  • subtitle2
  • body1
  • body2
  • button
  • caption
  • overline

また、variantと共に、componentを使用することで、themeを適用しつつ別の要素にすることもできます。

// どちらも同じthemeが適用され、要素だけ違う。
<Typography variant="h1">dammy text</Typography>
<Typography variant="h1" component="span">
    dammy text
</Typography>

まとめ

今回はBox、Container、Typographyについて紹介しました。

まとめると下記のようになります。

要素 説明
Box 基本的にはこれを使用する。html要素を設定する。
Container 要素を真ん中に寄せたい場合に使用する。
Typography themeのTypographyオブジェクトを使用してスタイリングしたい場合に使用する。

sxプロパティを使用し、スタイリングすることも可能ですが、
用途にあったものを使用し、Material UIを用いてより見やすく、きれいなコーディングをしましょう。

ここまで読んでくださり、ありがとうございました。

参考にした資料

https://next--material-ui.netlify.app/

Discussion