MUIのAppBarでfixedを使用すると要素が重なり、stickyだと固定されないときに確認すること。

はじめに

MUIのAppBarを固定させたい時、positionをfixedにすることで実現することができます。
しかし、fixedを使用すると、元々reativeで下にあった要素が上がり重なってしまいます。

AppBarのheightはドキュメントにも記載があるので、その分、重なる要素にPaddingを設けるなどで対処できますが、MUIのver5より、stickyを使用することで、固定かつ重なる部分を自動的に空けられるようになりました。

実際使ってみると、AppBarが固定されませんでした。
私は後述する内容で解決したので、それを記します。

AppBarを親要素にする。

const Header = () => { 
return ( 
<> 
 <Box>
   <AppBar position="sticky" />
  </Box>
</>
)}

上記のように、AppBarの親にBox等要素を置かず、下のように親要素にすることで解決しました。

const Header = () => { 
   return ( 
    <>
      <AppBar position="sticky" />
    </> 
)}

具体的には、AppBarの親要素のHeightに依存しています。
つまり、AppBarの親要素の高さの範囲内で固定され、
その高さを超えるとstaticのような挙動になります。