Material-UIのDrawerを開くとスクロール出来なくなってしまう

Question

ReactでCSSフレームワークのMaterial-UIを使用しながらWebアプリを制作しています。

メニューリストの実装でDrawerコンポーネントを使っているのですが、Drawerをopenな状態にすると、bodyタグにoverflow: hiddenが適用され元の画面がスクロールできなくなってしまいます。
細かい部分かもしれませんが、これをスクロールできるようにしたいです。

ちなみに、Drawerの引数varientに”permanent”または”persistent”を指定するとスクロールはできるのですが、元の画面部分をクリックしてもDrawerが閉じないことや元の画面が暗くならないなど、他の問題が生じるので、varientはデフォルトの”temporary”のままが好ましいと思います。

説明が分かりにくいかもしれませんが、よろしくお願い致します。

Comments

[hoshi-takanori]

temporary で drawer を開いた場合は、元の画面はスクロールさせずに drawer をスクロールするという仕様なのでは。

[janak]

やはりそうですか…
以下のように、DOM操作も試してみたのですができませんでした。
useEffect(() => {
document.body.style.overflow = “visible”
}, [document.body.style])

[hoshi-takanori]

一般的には React で生の DOM を操作するのは好ましくないというか、他と干渉しないように注意深く実装する必要がある (のは React に限りませんが) ので、残念ながら単純にそれだけいじってうまくいくというものではないのでしょうね、きっと。

[janak]

コメントありがとうございます。
とりあえず、この部分はCSSフレームワークを使わずに実装してみようと思います。