Snackbar のトランジションを変更したい

今日も Snackbar です。デフォルトはスライドインでしたが、なんかうるさく感じてしまい変更したくなりました。

トランジション
実は Material UI の Transition component がそのまま使える
とりあえず色んな Transition component を試してみた
まとめ

トランジション

公式ドキュメントにも トランジション について記載があります。

しかし、どうも分かりづらい。

import Grow from './Grow'

サンプルコードの上記1行だけ見ると、Grow.tsx または Grow.ts のようなファイルを用意する必要があるように見えます。

そして 確かに Grow の定義のようなサンプルコードも記載されています。

実は Material UI の Transition component がそのまま使える

ここに気付くまで数十分ウロウロしていました

mui.com

Material UI には Transition component なるものが用意されていて「表示の仕方」を簡単に変えることができます。

+ import { Grow } from '@mui/material'
  ～省略～
  return (
  ～省略～
    <SnackbarProvider
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      maxSnack={10}
+     TransitionComponent={Grow}
    >
      {children}
    </SnackbarProvider>
  )

たったこれだけで、Snackbar の表示を Slide-in から Grow に変えることができます。