MUIでの「AppBar」をスクロール時に隠す方法（備忘録）

はじめに
1. 環境
実装
参考

はじめに

環境

react: “^17.0.0 || ^18.0.0”,
@mui/material：^5.15.9
@emotion/react：^11.11.3
@emotion/styled：^11.11.0

実装

下にスクロールしたときにAppBar(ヘッダー）が隠れるようにする処理です。
リファレンスにも記されていますが、備忘録として記します。

components/layout/header.tsx

import { AppBar,Slide } from "@mui/material";
import useScrollTrigger from '@mui/material/useScrollTrigger';

const Header = () => {
 const trigger = useScrollTrigger();
 return (
  <Slide in={!trigger}>
    <AppBar position="fixed">ヘッダー</AppBar>
  </Slide>
)
}
export default Header;

MUIのSlideコンポーネントは、要素の表示・非表示のアニメーションが適用されます。
useScrollTrigger()でスクロールイベントに応じtrue | falseを返します。
inプロパティは、スライドインのアニメーションを実行します。
つまり、スクロールが停止したら、スライドインをします。

方向を指定したい場合は、Slideにdirectionプロパティを設けます。