🍷

AppBar の下にコンテンツが隠れる問題の原因と解決方法【MUI + Next.js】

に公開
HTML
Next.js
TypeScript
mui
tech

Next.js(App Router)、MUI（Material UI）で開発していると、AppBarをposition="fixed"で固定した際に、ページ上部の要素がヘッダーに隠れてしまうことがあります。

この記事では、

  • なぜコンテンツがAppBarの下に隠れるのか（原因）
  • MUI が推奨する解決方法
  • 実際のコード例

をわかりやすく解説します。

結論：原因は「fixed AppBarが高さを占有しない」ため

<AppBar position="fixed">

上記のようにした場合、AppBarは画面上部に重ねて固定されるだけで、レイアウト上は高さを占有していない扱いになります。

そのため、次のような現象が起きます：

  • ヘッダーのすぐ下にあるタイトルや画像が見えなくなる
  • スクロール位置がずれたように感じる
  • モバイルでは画面の縦幅が狭いため、AppBarが占める相対的な割合が大きく、問題が顕著になりやすい

MUI公式の正しい解決方法：ToolbarをAppBarの下に置く

MUI公式ドキュメントでは、固定AppBarを使用する場合はその直下にToolbarを追加して余白を確保することを推奨しています。

▼ 公式ドキュメント（英語）

実装例

悪い例

<Header />          // AppBar（fixed）が含まれるコンポーネント
<main> ... </main> // ← ここが隠れる！

良い例

<Header />          // AppBar（fixed）が含まれるコンポーネント
<Toolbar />         // ← 自動的に AppBar と同じ高さの余白が生成される
<main> ... </main>

なぜToolbarがベストなのか？

  • デフォルトではAppBarの高さは端末ごとに異なる
    • モバイル：約56px
    • デスクトップ：約64px
    • カスタマイズされているとさらに変化
  • Toolbarなら高さが自動で一致

ToolbarはAppBarの内部と同じ高さになるよう設計されています。つまり、自力でpaddingを設定したりする必要はありません。AppBarの下の要素にpaddingやmarginをつけることもできますが、モバイルとPCで高さがズレたりするので、MUIの設計思想に従う方が無難でしょう。

Toolbarなら高さが自動で一致する仕組み

Toolbarは単なる余白ではなく、MUIテーマ（Theme）内のmixins.toolbarの値を使って高さが決まる特殊なコンポーネントです。

MUIのAppBarとToolbarは次のような仕組みで連動しています：

  • MUIのテーマにはtheme.mixins.toolbarという、AppBarに対応した標準ツールバーの高さが定義されている
  • これはCSSのメディアクエリに対応したオブジェクトで、
    • モバイル時（56px）
    • デスクトップ時（64px）　のようにレスポンシブに高さが変わる
  • Toolbarは内部でこのmixins.toolbarを自動的に適用する
  • 一方、AppBarの内部に入るToolbarも同じmixinに基づいて高さが決まる

つまり、下記の高さが常に同じになるように設計されています。

  • AppBarの内部に配置されたToolbarと
  • AppBarの外に置いて余白として使ったToolbar

このため、特別なCSSを設定しなくても、AppBarの高さと完全に一致した余白が正しく作られるというわけです。

まとめ

MUIのAppBarを固定すると下のコンテンツが隠れる原因は、AppBarがレイアウト上では高さを持たないためでした。

なので、MUIの設計思想に則って、AppBarの直後に<Toolbar />を配置して高さ分のスペースを作りましょう！

Discussion