Theme component usage has been fixed, a component should never be wrapped in multiple Theme components.

web/pgadmin/browser/static/js/node_view.jsx

@@ -18,6 +18,7 @@ import { generateNodeUrl } from './node_ajax';
 import Notify from '../../../static/js/helpers/Notifier';
 import gettext from 'sources/gettext';
 import 'wcdocker';
+import Theme from '../../../static/js/Theme';
 
 /* The entry point for rendering React based view in properties, called in node.js */
 export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, formType, container, containerPanel, onEdit, onSave) {
@@ -204,6 +205,7 @@ export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, fo
 
   /* Fire at will, mount the DOM */
   ReactDOM.render(
+    <Theme>
       <SchemaView
         formType={formType}
         getInitData={initData}
@@ -221,7 +223,8 @@ export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, fo
         getSQLValue={getSQLValue}
         disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp}
         disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''}
-    />, container);
+      />
+    </Theme>, container);
 }
 
 /* When switching from normal node to collection node, clean up the React mounted DOM */

web/pgadmin/static/js/SchemaView/index.jsx

@@ -22,7 +22,6 @@ import diffArray from 'diff-arrays-of-objects';
 import _ from 'lodash';
 
 import {FormFooterMessage, MESSAGE_TYPE } from 'sources/components/FormComponents';
-import Theme from 'sources/Theme';
 import { PrimaryButton, DefaultButton, PgIconButton } from 'sources/components/Buttons';
 import Loader from 'sources/components/Loader';
 import { minMaxValidator, numberValidator, integerValidator, emptyValidator, checkUniqueCol, isEmptyString} from '../validators';
@@ -979,19 +978,15 @@ export default function SchemaView({formType, ...props}) {
   /* Switch the view based on formType */
   if(formType === 'tab') {
     return (
-      <Theme>
       <ErrorBoundary>
         <SchemaPropertiesView {...props}/>
       </ErrorBoundary>
-      </Theme>
     );
   }
   return (
-    <Theme>
     <ErrorBoundary>
       <SchemaDialogView {...props}/>
     </ErrorBoundary>
-    </Theme>
   );
 }
 

web/pgadmin/static/js/helpers/ModalProvider.jsx

@@ -17,7 +17,6 @@ import CloseIcon from '@material-ui/icons/CloseRounded';
 import CustomPropTypes from '../custom_prop_types';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
-import Theme from '../Theme';
 import HTMLReactParser from 'html-react-parser';
 import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
 import { Rnd } from 'react-rnd';
@@ -267,7 +266,6 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
   const [isfullScreen, setIsFullScreen] = useState(fullScreen);
 
   return (
-    <Theme>
     <Dialog
       open={true}
       onClose={closeModal}
@@ -276,6 +274,7 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
       fullScreen={isfullScreen}
       fullWidth={isFullWidth}
       disableBackdropClick
+      disablePortal
     >
       <DialogTitle className='modal-drag-area'>
         <Box className={classes.titleBar}>
@@ -296,7 +295,6 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
         {content(closeModal)}
       </DialogContent>
     </Dialog>
-    </Theme>
   );
 }
 ModalContainer.propTypes = {

web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx

@@ -10,7 +10,6 @@
 import _ from 'lodash';
 import React, { useContext, useState, useMemo, useEffect } from 'react';
 import gettext from 'sources/gettext';
-import Theme from 'sources/Theme';
 import PropTypes from 'prop-types';
 import url_for from 'sources/url_for';
 import Loader from 'sources/components/Loader';
@@ -324,7 +323,6 @@ export function GraphVisualiser({initColumns}) {
   };
 
   return (
-    <Theme>
     <Box className={classes.mainContainer}>
       <Loader message={loaderText} />
       <Box className={classes.topContainer}>
@@ -371,7 +369,6 @@ export function GraphVisualiser({initColumns}) {
         </Box>
       </Box>
     </Box>
-    </Theme>
   );
 }
 GraphVisualiser.propTypes = {