ブロックレベル要素
Boxコンポーネント
普通のHTMLで言えばdivの代わりになります。（divだとsxが使えない）
sx Propsを直接記述できるのでレイアウトの基礎になります。v4でもありましたが、v5ではパフォーマンスが大幅に向上したようです。
Containerコンポーネント
コンテナを中央寄せするためのコンポーネントです。maxWidthなどを指定します。
|
1 |
<Container maxWidth="xs"> |
themeを使えば、どのピクセルを基準にするかのbreakpointの変更も可能です。
Stackコンポーネント
|
1 2 3 4 5 6 7 8 9 10 |
import { Stack, Button } from "@mui/material"; <Stack direction="row" spacing={2}> <Button variant="contained" color="primary"> primary </Button> <Button variant="contained" color="secondary"> secondary </Button> </Stack> |
spacingを指定します。そうすれば自動的に子要素を間隔をあけて配置してくれます。
内部的にはflexboxのコンテナ的な役割になっています。
インライン要素
Typographyコンポーネント
普通のHTMLで言えばspanの代わりになります。（spanだとsxが使えない）
themeで設定ができるのでtheme通りにスタイリングしたい場合などにも使えます。
この記事へのコメントはありません。