はじめに
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のような挙動になります。
参考文献
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TVVJJTI4djUlMjklRTMlODElQTdIZWFkZXIlRTMlODIlOTIlRTQlQjglOEElRTklODMlQTglRTUlOUIlQkElRTUlQUUlOUElRTMlODElOTklRTMlODIlOEIlRTMlODElQTglRTMlODIlQjMlRTMlODMlQjMlRTMlODMlODYlRTMlODMlQjMlRTMlODMlODQlRTMlODElQUUlRTQlQjglOEElRTklODMlQTglRTMlODElOEMlRTklOUElQTAlRTMlODIlOEMlRTMlODIlOEIlRTUlOTUlOEYlRTklQTElOEMlRTMlODElQUUlRTglQTclQTMlRTYlQjElQkElRTYlQjMlOTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWE1ZjU4OTViMjJkZjY1ZDE4NWVjMjBlOWVjMTYxMDEy&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwS2FuYWRlODc0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mZmIxMTMxOTZmMjMwY2ZhM2QwMmRkM2Q2NmY2NGQyZQ&blend-x=142&blend-y=491&blend-mode=normal&s=481ebf17d75ff4f78c23b992944f5bef)
MUI(v5)でHeaderを上部固定するとコンテンツの上部が隠れる問題の解決法 - Qiita
はじめまして、最近Reactを触り始めた初心者です。初心者だからこそ同じ初心者が躓くところが分かる!ということで、勉強中に躓いた箇所とその解決法を投稿していこうと思います。今回は、MUI(v5)…
[AppBar] position="sticky" still not working · Issue #31085 · mui/material-ui
Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 This bug is still alive and bugging me, any wo...
コメント