fix: use react-shadow to avoid being affected by external style

cheminfo · May 1, 2021 · fd7b803 · fd7b803
1 parent 179b7c9
commit fd7b803
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "react-ocl-nmr": "^1.0.0",
     "react-plot": "^0.10.0",
     "react-rnd": "^10.2.4",
+    "react-shadow": "^19.0.2",
     "react-simple-code-editor": "^0.11.0",
     "react-slider": "^1.1.4",
     "react-split-pane": "^0.1.92",

diff --git a/src/component/NMRium.tsx b/src/component/NMRium.tsx
@@ -16,6 +16,7 @@ import {
   ReactElement,
   ReactNode,
 } from 'react';
+import root from 'react-shadow/emotion';
 import SplitPane from 'react-split-pane';
 import { useToggle, useFullscreen } from 'react-use';
 
@@ -291,19 +292,19 @@ function NMRium({
   }, [dispatchMiddleWare]);
 
   return (
-    <ErrorBoundary>
-      <GlobalProvider
-        value={{
-          rootRef: rootRef.current,
-          elementsWraperRef: elementsWraperRef.current,
-        }}
-      >
-        <PreferencesProvider value={preferencesState}>
-          <div
-            onMouseEnter={mouseEnterHandler}
-            onMouseLeave={mouseLeaveHandler}
-            style={{ height: '100%', position: 'relative' }}
-          >
+    <root.div
+      onMouseEnter={mouseEnterHandler}
+      onMouseLeave={mouseLeaveHandler}
+      style={{ height: '100%', position: 'relative' }}
+    >
+      <ErrorBoundary>
+        <GlobalProvider
+          value={{
+            rootRef: rootRef.current,
+            elementsWraperRef: elementsWraperRef.current,
+          }}
+        >
+          <PreferencesProvider value={preferencesState}>
             {/* @ts-expect-error: TODO remove when HelpProvider is migrated */}
             <HelpProvider
               data={helpData}
@@ -403,10 +404,10 @@ function NMRium({
                 </DispatchProvider>
               </AlertProvider>
             </HelpProvider>
-          </div>
-        </PreferencesProvider>
-      </GlobalProvider>
-    </ErrorBoundary>
+          </PreferencesProvider>
+        </GlobalProvider>
+      </ErrorBoundary>
+    </root.div>
   );
 }