diff --git a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
index 959d9a45ace6f..756c42214d7c0 100644
--- a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButton } from '@elastic/eui';
 import { getRouterLinkProps } from '@kbn/router-utils';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { css } from '@emotion/css';
 import { LocatorPublic } from '@kbn/share-plugin/common';
 import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common';
 import { useKibanaContextForPlugin } from '../hooks/use_kibana';
@@ -46,6 +47,8 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
     },
   } = useKibanaContextForPlugin();
 
+  const { euiTheme } = useEuiTheme();
+
   const { dismissalStorageKey, message } = pageConfigurations[page];
 
   const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false);
@@ -65,9 +68,9 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
       iconType="iInCircle"
       heading="h2"
       onDismiss={() => setDismissed(true)}
-      css={({ euiTheme }) => ({
-        marginBottom: euiTheme.size.l,
-      })}
+      className={css`
+        margin-bottom: ${euiTheme.size.l};
+      `}
     >
       <p>{message}</p>
       <EuiButton