タイトル : Next.js MUI Layout Componentsに何があるかな
更新日 : 2024-01-27
カテゴリ : プログラミング
MUI Layout Componentsに以下があるよ
- Box
- Container
- Grid
- Grid v2
- Stack
- ImageList
- Hidden(deprecated)
MUIの各ページから概要のみ抜粋したものです。以下でざっとそれぞれの用途がわかるかな。
Box
- The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
Container
- The container centers your content horizontally. It's the most basic layout element.
Grid
- The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
- 【初学者向け】React(TS) + MUIでGridを使ってレイアウトを作る
- 【React】Material-UIのGrid、Stackで横並びを実現する
Grid v2
- The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
import Grid from '@mui/material/Grid'; // Grid version 1
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
Stack
- Stack is a container component for arranging elements vertically or horizontally.
- 【MUI】StackでFlexboxのgapが使えるようになった(実験的機能)
ImageList
- The Image List displays a collection of images in an organized grid.
Hidden deprecated ※じゃないか
- The Hidden component was deprecated in Material UI v5. To learn more, see the Hidden section of the migration docs.