From 3b2950151e41e51c04f3cf402e82819e79f3dd87 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 4 Aug 2021 19:19:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dmodal=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E7=AE=A1=E7=90=86=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx                  |  2 +-
 web/src/routes/Invite/index.tsx  | 23 +++++++++++++----------
 web/src/routes/Main/Provider.tsx |  5 ++++-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 97232b01..92a62f6e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -35,7 +35,7 @@ const AppProvider: React.FC = React.memo((props) => {
     <BrowserRouter>
       <TcProvider>
         <AntdProvider getPopupContainer={getPopupContainer}>
-          <PortalHost>{props.children}</PortalHost>
+          {props.children}
         </AntdProvider>
       </TcProvider>
     </BrowserRouter>
diff --git a/web/src/routes/Invite/index.tsx b/web/src/routes/Invite/index.tsx
index 4f4cf82e..bb8e51c3 100644
--- a/web/src/routes/Invite/index.tsx
+++ b/web/src/routes/Invite/index.tsx
@@ -1,9 +1,10 @@
 import { Divider } from 'antd';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useParams } from 'react-router';
 import { InviteInfo } from './InviteInfo';
 import bgImage from '@assets/images/bg.jpg';
 import { JoinBtn } from './JoinBtn';
+import { PortalHost } from '@/components/Portal';
 
 /**
  * 邀请界面路由
@@ -12,18 +13,20 @@ export const InviteRoute: React.FC = React.memo(() => {
   const { inviteCode } = useParams<{ inviteCode: string }>();
 
   return (
-    <div
-      className="h-full w-full bg-gray-600 flex justify-center items-center bg-center bg-cover bg-no-repeat"
-      style={{ backgroundImage: `url(${bgImage})` }}
-    >
-      <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
-        <InviteInfo inviteCode={inviteCode} />
+    <PortalHost>
+      <div
+        className="h-full w-full bg-gray-600 flex justify-center items-center bg-center bg-cover bg-no-repeat"
+        style={{ backgroundImage: `url(${bgImage})` }}
+      >
+        <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
+          <InviteInfo inviteCode={inviteCode} />
 
-        <Divider />
+          <Divider />
 
-        <JoinBtn inviteCode={inviteCode} />
+          <JoinBtn inviteCode={inviteCode} />
+        </div>
       </div>
-    </div>
+    </PortalHost>
   );
 });
 InviteRoute.displayName = 'InviteRoute';
diff --git a/web/src/routes/Main/Provider.tsx b/web/src/routes/Main/Provider.tsx
index cf15d83a..077522f9 100644
--- a/web/src/routes/Main/Provider.tsx
+++ b/web/src/routes/Main/Provider.tsx
@@ -14,6 +14,7 @@ import _isNil from 'lodash/isNil';
 import { getUserJWT } from '../../utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
+import { PortalHost } from '@/components/Portal';
 
 /**
  * 应用状态管理hooks
@@ -79,7 +80,9 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   return (
     <ReduxProvider store={store}>
-      <SidebarContextProvider>{props.children}</SidebarContextProvider>
+      <SidebarContextProvider>
+        <PortalHost>{props.children}</PortalHost>
+      </SidebarContextProvider>
     </ReduxProvider>
   );
 });