はじめに
MUIのAppBarを固定させたい時、position を fixed にすることで実現できます。
しかし、fixed を使用すると、もともと relative で下にあった要素が上がり重なってしまいます。
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 のような挙動になります。