diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
index 0d5d99305dc63..bcbb68022c4e5 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styled, supersetTheme } from '@superset-ui/core';
+import { styled, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { ErrorLevel } from './types';
 
@@ -54,12 +54,14 @@ export default function BasicErrorAlert({
   level,
   title,
 }: BasicErrorAlertProps) {
+  const theme = useTheme();
+
   return (
     <StyledContainer level={level} role="alert">
       {level === 'error' ? (
-        <Icons.ErrorSolid iconColor={supersetTheme.colors[level].base} />
+        <Icons.ErrorSolid iconColor={theme.colors[level].base} />
       ) : (
-        <Icons.WarningSolid iconColor={supersetTheme.colors[level].base} />
+        <Icons.WarningSolid iconColor={theme.colors[level].base} />
       )}
       <StyledContent>
         <StyledTitle>{title}</StyledTitle>
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index 3298fcf0561a7..e98a463b2517c 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useState, ReactNode } from 'react';
-import { styled, supersetTheme, t } from '@superset-ui/core';
+import { styled, useTheme, t } from '@superset-ui/core';
 import { noOp } from 'src/utils/common';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
@@ -97,6 +97,8 @@ export default function ErrorAlert({
   subtitle,
   title,
 }: ErrorAlertProps) {
+  const theme = useTheme();
+
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isBodyExpanded, setIsBodyExpanded] = useState(false);
 
@@ -109,12 +111,12 @@ export default function ErrorAlert({
           {level === 'error' ? (
             <Icons.ErrorSolid
               className="icon"
-              iconColor={supersetTheme.colors[level].base}
+              iconColor={theme.colors[level].base}
             />
           ) : (
             <Icons.WarningSolid
               className="icon"
-              iconColor={supersetTheme.colors[level].base}
+              iconColor={theme.colors[level].base}
             />
           )}
           <strong>{title}</strong>
@@ -172,12 +174,12 @@ export default function ErrorAlert({
               {level === 'error' ? (
                 <Icons.ErrorSolid
                   className="icon"
-                  iconColor={supersetTheme.colors[level].base}
+                  iconColor={theme.colors[level].base}
                 />
               ) : (
                 <Icons.WarningSolid
                   className="icon"
-                  iconColor={supersetTheme.colors[level].base}
+                  iconColor={theme.colors[level].base}
                 />
               )}
               <div className="title">{title}</div>