Next.js のレイアウトによりページのコンテンツが見えにくくなる

Question

マテリアル ui (https://mui.com/material-ui/react-bottom-navigation/) のボトム ナビゲーションを Next.js アプリのレイアウトとして使用しようとしています。

ただし、ナビゲーションはページの下部をカバーします。マージンとパディングを変更してみましたが、うまくいきませんでした。

私が使用している下部のナビゲーションは、マテリアル ui とまったく同じです。

レイアウトなしではこんな感じです。

レイアウトを使用すると、コンテンツがマスクされます -

＃＃＃どうもありがとうございます＃＃＃

Answer 1

コード スニペットが提供されていないため、その使用方法を伝えるのは困難ですが、マテリアル UI ナビゲーションはページ コンテンツの上部に表示されるように設計されているようです。

レイアウト内のナビゲーションの上に、ナビゲーションと同じ高さの空の div を追加して、その分だけ低くする必要があります。