タイトル : Next.js MUI Layout Componentsに何があるかな
更新日 : 2024-01-27
カテゴリ : プログラミング
タグ :
frontend   
nextjs   

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

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

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.