React Hook FormはSubmit時にバリデーションエラーのあるフィールドに自動でフォーカスしてくれます。

しかし、React Hook Form と MUI を連携させてるときにそれが動作しなかったので、その小ネタ。

その時のコードが以下のコードです。
setFocus が動作しません。

```tsx:このコードには問題があります。
<Controller
  name="title"
  control={control}
  rules={{
    required: "入力してください。",
    maxLength: {
      value: 150,
      message: "最大150文字です",
    },
  }}
  render={({ field, fieldState }) => (
    <TextField
      {...field}
      fullWidth
      multiline
      error={fieldState.invalid}
      helperText={fieldState.error?.message}
    />
  )}
/>
```

解決方法としては`field`から`ref`を除外し、除外した`ref`を`inputRef`に渡します。

```tsx:よい例
<Controller
  name="title"
  control={control}
  rules={{
    required: "入力してください。",
    maxLength: {
      value: 150,
      message: "最大150文字です",
    },
  }}
  render={({ field: { ref, ...field }, fieldState }) => (
    <TextField
      {...field}
      inputRef={ref}
      fullWidth
      multiline
      error={fieldState.invalid}
      helperText={fieldState.error?.message}
    />
  )}
/>
```

解説するほどでもないですが、MUIでは装飾のために`TextField`などは純粋な`textarea`や`input`タグではありません。`textarea`や`input`タグを`div`で囲ったコンポーネントになってます。

`field`をそのまま`TextField`に渡すと、`div`タグの`ref`が変更されて`textarea`や`input`タグの`ref`は変更されません。
MUIは`textarea`や`input`タグにアクセスする方法を提供してくれていて、それが`inputRef`というわけです。

参考: https://github.com/react-hook-form/react-hook-form/issues/5947

React Hook Form と MUI を使うときに setFocus が動作しない

# はじめに

この記事ではエンジニアとしてMUIを使ってきた中で溜まってきた知見を共有することにあります。MUIのドキュメントに書いてあることは省略することが多いですので、そちらも目を通してください。

コンポーネントの便利な使い方や実装例を紹介していきます。

https://mui.com/material-ui/getting-started/

# layoutのコンポーネント紹介

Layoutに関するコンポーネントを軽く紹介します。

## Box

https://mui.com/material-ui/react-box/

Boxコンポーネントはデフォルトで`<div>`としてレンダリングされます。ではなぜ`<div>`ではなく`<Box>`を使うのかというと、他のMUIコンポーネントと同じようなpropsを使えるからです。

公式ドキュメントにあるサンプルコードを見てみるとよくわかると思います。

```
import * as React from 'react';
import Box from '@mui/material/Box';

export default function BoxSystemProps() {
  return (
    <Box
      height={200}
      width={200}
      my={4}
      display="flex"
      alignItems="center"
      gap={4}
      p={2}
      sx={{ border: '2px solid grey' }}
    >
      This Box uses MUI System props for quick customization.
    </Box>
  );
}
```

component引数を使って`<div>`以外がレンダリングされるように指定できます。

## Container

https://mui.com/material-ui/react-container/

Containerコンポーネントは子要素の横幅を制限して中央に配置します。基本的にページの外側に配置して、メインコンテンツやサイドバーを囲みます。1ページに複数回使うことはほぼないと思います。

## GridとStack

https://mui.com/material-ui/react-grid/

https://mui.com/material-ui/react-stack/

Gridコンポーネントは横幅を12で分割し、各要素を指定の割合で表示できます。

Stackコンポーネントは単に横や縦に要素を並べるときに使います。

使い分けとして、例えばメインコンテンツとサイドバーの配置などはGridをよく使います。画面幅が小さくなったときにメインコンテンツも再度バーも同じ割合で小さくなります。
固定サイズのボタンやアイコンを横に並べたりするときはStackが便利です。

# 2カラムの例

## 要件

よくある2カラムのレイアウトを作ってみます。
header, main content, side bar, footerの要素があり、side barの下側の要素はスクロールに追従するとします。

## 動作例

[サンプル](https://yosipy.github.io/mui5_example)


スクロール前（PC）
![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/deeQUMbvqAhpKUMYipUm/origin.webp)


スクロール後（PC）
![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/UOGpG9b7HcppZChPMk5j/origin.webp)

また、画面横幅が小さいときはサイドバーをメインコンテンツの下に配置します。

スクロール前（Mobile）



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/Mz7Qw2Lyhik9ZyMNoHBb/origin.webp)



スクロール後（Mobile）


![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/SXx63WPoSurrtcISZjqZ/origin.webp)

## ソースコード

https://github.com/yosipy/mui5_example/blob/main/src/pages/layout/TwoColumnPage/TwoColumnPage.tsx

```tsx:src/pages/layout/TwoColumnPage/TwoColumnPage.tsx
import { Box, Button, Container, Grid, Stack } from "@mui/material"
import { FC } from "react"

export const TwoColumnPage: FC = () => {
  return (
    <Container maxWidth="md">
      <Grid
        container
        alignItems="flex-start"
        spacing={4}
        sx={{ display: "flex", alignItems: "stretch" }}
      >
        {/* header */}
        <Grid item xs={12}>
          <Box
            width="100%"
            height="100px"
            sx={{ backgroundColor: "darkblue", fontSize: "2.5rem" }}
          >
            header
          </Box>
        </Grid>

        {/* main content */}
        <Grid item xs={12} md={8}>
          <Box width="100%" height="800px" sx={{ backgroundColor: "darkblue" }}>
            <Box sx={{ fontSize: "2.5rem" }}>main content</Box>
            <Stack direction={"row"} spacing={1} useFlexGap flexWrap="wrap">
              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
                <Button variant="contained">Button{i}</Button>
              ))}
            </Stack>
          </Box>
        </Grid>

        {/* side bar */}
        <Grid item xs={12} md={4}>
          <Box
            width="100%"
            height="200px"
            sx={{ backgroundColor: "darkblue", fontSize: "2.5rem" }}
          >
            {"side bar(upper)"}
          </Box>
          <Box
            sx={{
              position: "sticky",
              top: 40,
              mt: 4,
              backgroundColor: "darkblue",
              fontSize: "2.5rem",
            }}
          >
            {"side bar(bottom)"}
          </Box>
        </Grid>

        {/* footer */}
        <Grid item xs={12}>
          <Box
            width="100%"
            height="100px"
            sx={{ backgroundColor: "darkblue", fontSize: "2.5rem" }}
          >
            footer
          </Box>
        </Grid>
      </Grid>
    </Container>
  )
}

```


MUI v5 でページの骨格デザインを作成する (Layoutコンポーネント)

Next.jsとMUIを用いてるときにリンクする方法について調べると以下のコードを見かけます。

```ts
import { FC } from "react"
import NextLink from "next/link"
import { Typography, Link as MuiLink } from "@mui/material"

export const TopPage: FC = () => {
  return (
    <NextLink passHref href="/">
      <MuiLink underline="none">
        <Typography variant="h5" component="div">
          aaaa
        </Typography>
      </MuiLink>
    </NextLink>
  )
}
```

しかし、このコードはNext.js13においてエラーになります。

```
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <a> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
```

```
Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
```

これはNext.js13のLinkの仕様変更でaタグのラッパーをレンダリングするように変わったからみたいです。
https://github.com/vercel/next.js/discussions/49508

したがって以下のようなHTMLをレンダリングしており、NextのLinkとMUIのLinkがそれぞれaタグを出力してます。

```
<a href="/">
  <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-bfksxn-MuiTypography-root-MuiLink-root">
    <div class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root">
      aaaa
    </div>
  </a>
</a>
```

aタグの中にaタグが入ってることで警告が出てます。

# 解決方法

最終的に以下のように書くことで回避できました。
MUIのLinkコンポーネントの引数にNextjsのLinkコンポーネントを渡します。

```ts
import { FC } from "react"
import NextLink from "next/link"
import { Typography, Link as MuiLink } from "@mui/material"

export const TopPage: FC = () => {
  return (
    <MuiLink component={NextLink} href="/" underline="none">
      <Typography variant="h5" component="div">
        aaaa
      </Typography>
    </MuiLink>
  )
}
```

レンダリングされるHTMLは以下のような感じです。

```
<a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-bfksxn-MuiTypography-root-MuiLink-root" href="/">
  <div class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root">
    aaaa
  </div>
</a>
```

Next.js 13でMUIのLinkを使う

フォームの保存時などエラーや成功のメッセージを表示したいと思います。

こんな感じです。

![エラーや成功のメッセージの表示](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/zgLhzfdJwwmovVWS2cRC/origin.webp)

このコンポーネントを使いやすいようにまとめたのでよければご使用ください。

# AlertSnackbarコンポーネントの紹介

AlertSnackbarコンポーネントは以下のようになります。

```tsx:AlertSnackbar.tsx
import { FC, SyntheticEvent } from "react"
import Stack from "@mui/material/Stack"
import Snackbar from "@mui/material/Snackbar"
import Alert, { AlertColor } from "@mui/material/Alert"
import IconButton from "@mui/material/IconButton"
import CloseIcon from "@mui/icons-material/Close"

export type AlertSnackbarState = {
  open: boolean
  body: string
  severity?: AlertColor
}

type Props = {
  alertSnackbarState: AlertSnackbarState
  setAlertSnackbarState: (state: AlertSnackbarState) => void
}

export const AlertSnackbar: FC<Props> = (props) => {
  const handleClose = (event: SyntheticEvent | Event, reason?: string) => {
    if (reason === "clickaway") {
      return
    }

    props.setAlertSnackbarState({
      ...props.alertSnackbarState,
      body: "",
      open: false,
    })
  }

  return (
    <Stack spacing={2} sx={{ width: "100%" }}>
      <Snackbar
        open={props.alertSnackbarState.open}
        autoHideDuration={6000}
        onClose={handleClose}
      >
        <Alert
          variant="filled"
          severity={props.alertSnackbarState.severity}
          action={
            <IconButton
              aria-label="close"
              color="inherit"
              size="small"
              onClick={handleClose}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          }
          sx={{ mb: 2 }}
        >
          {props.alertSnackbarState.body}
        </Alert>
      </Snackbar>
    </Stack>
  )
}

```

ポイントとしては`handleClose`の`setAlertSnackbarState`で`severity`を更新していないことです。
Snackbarを閉じるときに`severity`を変更すると、一瞬異なる色が見えてちらついてしまいます。

同じ理由で`body`も更新しない方が良いのですが、間違ったメッセージを表示することが無いように消してます。



# AlertSnackbarコンポーネントの使い方

AlertSnackbarState型のStateを作成して、これを更新することでメッセージの表示を制御します。

```tsx
import { FC, useState } from "react"
import {
  AlertSnackbar,
  AlertSnackbarState,
} from "@/components/sharedComponents/AlertSnackbar/AlertSnackbar"

export const ProfileForm: FC = () => {
  const [alertSnackbarState, setAlertSnackbarState] =
    useState<AlertSnackbarState>({
      body: "",
      severity: undefined,
      open: false,
    })

  const onSubmit = async () => {
    try {
      // Save or update process

      setAlertSnackbarState({
        open: true,
        body: "更新しました",
      })
    } catch (e) {
      setAlertSnackbarState({
        open: true,
        body: "更新に失敗しました",
        severity: "error",
      })
    }
  }

  return (
    <>
      <form onSubmit={onSubmit}>{/* Something */}</form>

      <AlertSnackbar
        alertSnackbarState={alertSnackbarState}
        setAlertSnackbarState={setAlertSnackbarState}
      />
    </>
  )
}

```

Alert と Snackbar を組み合わせたメッセージの表示コンポーネントの紹介

以下のようなコードがあるとする。

```tsx
<Stack alignItems="stretch" spacing={1} sx={{ p: 1 }}>
  <Button
    href="/articles/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <ArticleRoundedIcon
      sx={{
        color: nohColors.mauve,
      }}
    />
    記事を投稿する
  </Button>
  <Button
    href="/articles/new?type=miniBlog"
    color="inherit"
    variant="text"
    size="large"
    sx={{ textTransform: "none" }}
  >
    <ArticleRoundedIcon sx={{ color: nohColors.lightBlue }} />
    {"記事を投稿する(mini blog)"}
  </Button>
  <Button
    href="/question_posts/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <QuestionAnswerRoundedIcon sx={{ color: nohColors.pink }} />
    AIに質問する
  </Button>
</Stack>
```

テキストが中央にそろっていては見づらいです。

![MUIでボタン内の要素が中央寄せになっている](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/mtWcxuoSJo3BDukVXag7/origin.webp)

こういったとき、ボタン要素の幅はそのままで文字だけを左に寄せたいとします。

以下のように`direction="row"`と`width: "100%"`を指定したStackコンポーネントを挟んであげるときれいにできます。

```tsx
<Stack alignItems="stretch" spacing={1} sx={{ p: 1 }}>
  <Button
    href="/articles/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack direction="row" sx={{ width: "100%" }}>
      <ArticleRoundedIcon
        sx={{
          color: nohColors.mauve,
        }}
      />
      記事を投稿する
    </Stack>
  </Button>
  <Button
    href="/articles/new?type=miniBlog"
    color="inherit"
    variant="text"
    size="large"
    sx={{ textTransform: "none" }}
  >
    <Stack direction="row" sx={{ width: "100%" }}>
      <ArticleRoundedIcon sx={{ color: nohColors.lightBlue }} />
      {"記事を投稿する(mini blog)"}
    </Stack>
  </Button>
  <Button
    href="/question_posts/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack direction="row" sx={{ width: "100%" }}>
      <QuestionAnswerRoundedIcon
        sx={{ color: nohColors.pink }}
      />
      AIに質問する
    </Stack>
  </Button>
</Stack>
```

![MUIでボタン内の要素を左寄せにできている](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/1RRcDj4FIK50G2uBzD1h/origin.webp)


右寄せにしたい場合はStackコンポーネントの`justifyContent="flex-end"`を使用する。

```tsx
<Stack alignItems="stretch" spacing={1} sx={{ p: 1 }}>
  <Button
    href="/articles/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack
      direction="row"
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <ArticleRoundedIcon
        sx={{
          color: nohColors.mauve,
        }}
      />
      記事を投稿する
    </Stack>
  </Button>
  <Button
    href="/articles/new?type=miniBlog"
    color="inherit"
    variant="text"
    size="large"
    sx={{ textTransform: "none" }}
  >
    <Stack
      direction="row"
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <ArticleRoundedIcon sx={{ color: nohColors.lightBlue }} />
      {"記事を投稿する(mini blog)"}
    </Stack>
  </Button>
  <Button
    href="/question_posts/new"
    color="inherit"
    variant="text"
    size="large"
  >
    <Stack
      direction="row"
      justifyContent="flex-end"
      sx={{ width: "100%" }}
    >
      <QuestionAnswerRoundedIcon
        sx={{ color: nohColors.pink }}
      />
      AIに質問する
    </Stack>
  </Button>
</Stack>
```

![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/FfirXMu4OZ28b6PDCYyo/origin.webp)



MUI v5でボタン内要素を左寄せまたは右寄せにする

小ネタ

LinkコンポーネントでSpeedDialActionコンポーネントを囲んでも機能せず、エラーになる。

正解はアイコンのコンポーネントをLinkコンポーネントで囲む。

```tsx:SpeedDialTooltipOpen.tsx
import NextLink from "next/link"
import {
  Backdrop,
  Box,
  SpeedDial,
  SpeedDialAction,
  Link as MuiLink,
} from "@mui/material"
import { FC, useState } from "react"

import SpeedDialIcon from "@mui/material/SpeedDialIcon"
import OpenInNewIcon from "@mui/icons-material/OpenInNew"

const actions = [
  {
    icon: (
      <MuiLink
        component={NextLink}
        href="https://www.deepl.com/ja/translator"
        target="_blank"
        rel="noopener noreferrer"
        underline="none"
      >
        <OpenInNewIcon />
      </MuiLink>
    ),
    name: "DeepL",
  },
  {
    icon: (
      <MuiLink
        component={NextLink}
        href="https://translate.google.co.jp/?hl=ja&sl=ja&tl=en&op=translate"
        target="_blank"
        rel="noopener noreferrer"
        underline="none"
      >
        <OpenInNewIcon />
      </MuiLink>
    ),
    name: "Google翻訳",
  },
]

export const SpeedDialTooltipOpen: FC = () => {
  const [open, setOpen] = useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  return (
    <Box>
      <Backdrop open={open} />
      <SpeedDial
        ariaLabel="Link to external translation site"
        sx={{ position: "absolute", bottom: 16, right: 16 }}
        icon={<SpeedDialIcon />}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipOpen
            onClick={handleClose}
          />
        ))}
      </SpeedDial>
    </Box>
  )
}

```



![](https://storage-noh-production.noh.ink/public/users/2goNuJNOwlWdiNM2FK20SARNFYq2/markdownImages/mbHqlzNGVZDMEq6C5lQc/origin.webp)

