Я пытаюсь построить свой интерфейс, используя Material-UI (текущая версия 3.1.2.)
Некоторое время назад, когда я использовал Bootstrap4, я добавил style="overflow-y: scroll; height: 100%" в свой тег headчтобы всегда отображать полосу прокрутки, чтобы приложение не перепрыгивало, когда содержимое страницы становилось длиннее, чем экран.
Теперь, когда я пытаюсь использовать Material-UI, настройка переполнения, кажется, вызывает проблемы в сочетании сВсплывающие компоненты Material-UI (popper, menu и т. Д.)
Я прочитал в FAQ, что это известная проблема с обходным решением: https://material -ui.com / Getting-Start / Faq/ # Зачем делать фиксированные позиционные-элементы-двигаться-когда-а-модал-открывается-
Но я не уверен, что это говорит мне делать.Что подразумевается под фразой «применить глобальный класс» в следующем?
"применить глобальное фиксированное имя класса .mui ... для обработки этих элементов."
Где они предполагают, что mui-fixed будет добавлено - ккаждый компонент в моем приложении?На якорь меню / поппер?Или они имеют в виду, что я должен применять его «глобально» (т.е. где-то высоко в иерархии компонентов страницы React?)
Тем временем, как обходной путь, я только что удалил переполнениестайлинг от моего html элемента.Содержание приложения по-прежнему скачет, когда содержимое увеличивается / сжимается по размеру страницы, но кажется менее уродливым, чем когда я использовал Bootstrap.
Я пытался добавить класс mui-fixed к своему телу, поэтомуКогда приложение запускается, оно выглядит следующим образом:
<body style="overflow-y: scroll; height: 100%" class="mui-fixed">
Так что, когда страница короткая, полоса прокрутки отключена.Если страница увеличивается, полоса прокрутки становится активной.
Затем, пока отображается всплывающее меню, Material-UI изменяет его на следующее:
<body style="overflow: hidden; height: 100%; padding-right: 17px;" class="mui-fixed">
Что выглядит хорошо, независимо от содержимогодлина.Но затем, когда меню закрывается, Material-UI меняет элемент body на:
<body style="height: 100%; padding-right: 0px;" class="mui-fixed">
Стиль переполнения исчезает, и в результате полоса прокрутки полностью удаляется, если содержимое страницы короче окна -поэтому содержимое страницы «перепрыгивает», чтобы заполнить пространство от отсутствующей полосы прокрутки.