【React】MaterialUIのGrid2を使ってみる。

前提

この記事は、React、TypeScript勉強中の私が、Gridを使って履歴書入力フォームのUIを作成した時のことをまとめたものです。

認知にずれなどありましたらコメントで指摘していただけると幸いです。

開発環境

• next 15.0.3
• raect 18.3.1
• mui 6.1.8

旧Gridとの違い

• importの方法
• サイズプロパティの指定方法(CSS変数の採用)
• オフセットが使える

旧Gridについて

まずは日本語の記事を参考にして、旧Grid(Grid1)を使ったところ斜線が引かれ、非推奨との表示が出ました。

↓　公式ドキュメントでも非推奨とされています

↓　ちなみにChatGPTは旧Gridでコードを出力してきます。(Grid2のコードを投げると旧Gridに修正されます)

インストール

materialUIがインストールされていればそのまま使えます。

npm install @mui/material @emotion/react @emotion/styled

import

importは次のように行います。

import  Grid  from "@mui/material/Grid2";

公式ドキュメントでは次のようになっていますが、エラーになります

//Error:モジュール '@mui/material/Unstable_Grid2' またはそれに対応する型宣言が見つかりません。
import Grid from '@mui/material/Unstable_Grid2';

また、ほかのMUIコンポーネントと一緒にimportすると旧Gridとして扱われます。

import {Box,Grid} from '@mui/material'

使い方

Grid Containerの中にGridを入れます。spacingでGrid間のスペースを調整できます。

画面を縦に12分割し各Gridが何割占めるのかをsizeプロパティで設定します。md,xsプロパティを使い、画面サイズに応じてこれを変更できます。

ちなみに、旧Gridではこのサイズを<Grid item xs={6}>のようにしていました。

<Grid container spacing={2}>                            
    <Grid size={{xs:8,md:8}}>
        <div></div>
    </Grid>
</Grid>    

公式ドキュメントから、色んなパターンをレスポンシブにいじれるので試してみてください。
https://mui.com/material-ui/react-grid2/

出来たもの

コード(UIのみ)

<Container maxWidth="md" sx={{ mt: 3, mb: 3 }}>
<Stack spacing={2}>
    <Grid container spacing={2}>
        <Grid size={{ xs: 8, md: 8 }}>
            <Stack spacing={2}>
                <TextField id="氏名" label="氏名" variant="filled" />
                <TextField fullWidth size="medium" id="生年月日" label="生年月日" variant="filled" type="date" slotProps={{ inputLabel: { shrink: true } }} />
                <Grid container spacing={2}>
                    <Grid size={{ xs: 6, md: 6 }}>
                        <TextField fullWidth size="medium" id="年齢" label="年齢" variant="filled" type="number" />
                    </Grid>
                    <Grid size={{ xs: 6, md: 6 }}>
                        <TextField select fullWidth size="medium" id="性別" label="性別" variant="filled">
                            <MenuItem value={1}>男性</MenuItem>
                            <MenuItem value={2}>女性</MenuItem>
                            <MenuItem value={3}>その他</MenuItem>
                        </TextField>
                    </Grid>
                </Grid>
                <TextField fullWidth size="medium" id="最終学歴" label="最終学歴" variant="filled" />
            </Stack>
        </Grid>
        <Grid size={{ xs: 4, md: 4 }}>
            <Card sx={{ bgcolor: "#555555", width: "100%", aspectRatio: "1 / 1" }} />
        </Grid>
    </Grid>
    <TextField fullWidth multiline maxRows={4} size="medium" id="プログラミングの経験・使用言語" label="プログラミングの経験・使用言語" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="自己PR" label="自己PR" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="研究成果" label="研究成果" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="資格" label="資格" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="学生時代頑張ったこと" label="学生時代頑張ったこと" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="志望理由" label="志望理由" variant="filled" />
</Stack>
</Container>

まとめ

以上になります。公式ドキュメントの大切さを身にしみて感じました。

間違っている部分があれば、コメントで指摘していただけると幸いです！😸