英文:
MUI Modal overlay ionic select popups
问题
我有一个React应用程序，其中我使用了MUI库，但在大多数代码中仍然使用Ionic。
描述
在打开包含Ionic选择器的MUI模态窗口时，选择模态窗口被MUI模态窗口覆盖，阻止用户使用网站。
原因
MUI的模态窗口是基于其门户渲染的，而Ionic位于不同的上下文中。
因此，存在使用不同方法的库之间的不兼容性问题。
在sandbox中提供了一个明确的示例：
https://codesandbox.io/s/ionic-react-select-icon-bug-forked-jotf5q?file=/src/App.tsx
当然，为了解决这个问题，我们可以使用我们自己的选择器与弹出解决方案，而不是Ionic选择器，但我只是想知道是否有其他方式来解决这个问题（在codesandbox中提供的方式）。
更新：
看起来与根样式.ion-page有关，但仍然在思考如何解决它。
英文:
I have a react application in which I use the MUI lib, but I still use ionic in most of the code.
DESCRIPTION
Upon opening MUI modal windows that contain ionic selects inside, the select modals get overlapped by the MUI modal window, blocking the user from using the site.
Reason:
The modal window of the MUI is rendered based on its portal, while ionic lies in a different context.
So there is a problem of incompatibility of libraries that use different approaches.
A clear example in the sandbox:
https://codesandbox.io/s/ionic-react-select-icon-bug-forked-jotf5q?file=/src/App.tsx
In order to fix the problem of course we can use our own select with popup solution instead ionic select, but I just wondering if it's possible to fix this but ( that I provided in codesandbox), another way.
Update:
Look that it relates to root styles .ion-page, but still wondering how to fix it
答案1
得分: 1
the reason behind that is that MUI is appending the modal outside the ion-app/root app.
my solution for this is to add a container to Mui Modal like
<Modal container={document.querySelector("ion-app")}>
英文:
the reason behind that is that MUI is appending the modal outside the ion-app/root app.
my solution for this is to add a container to Mui Modal like
<Modal container={document.querySelector("ion-app")} >
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论