Блог

Моя проблема связана с желанием, чтобы на странице отображался мобильный телефон, имитирующий изображение реального телефона. Я хотел бы использовать компоненты из Material UI, такие как панель приложений и диалоговое окно, однако они не ограничиваются контейнером телефона, а вместо этого по-прежнему отображаются во всем окне браузера.

Однако, когда я использую компонент диалога, он по-прежнему относится к фактическому экрану просмотра браузера, а не к экрану просмотра «телефона», например, к следующему:

Я бы хотел, чтобы он делал то, что показано на рисунке ниже, без использования IFrame.

Есть ли способ, которым я могу установить привязку для компонентов — или, по крайней мере, заставить их рассматривать определенный элемент как свою границу? Спасибо.

Для тех, кто интересуется, решена ли эта проблема, решением было свернуть мои собственные компоненты диалога и фона с помощью компонентов Paper и Box.

Ссылка была передана в компонент Box, который окружает все «Приложение для телефона», и его текущий элемент передается в свойство контейнера портала Mui.

Это позволяет контейнеру пользовательского «Диалога» быть контейнером, которым я хотел, чтобы вещи были ограничены.