[8.x] [Security solution] CSS emotion/react fix (#205934) (#205988)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security solution] CSS emotion/react fix
(#205934)](#205934)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Steph
Milovic","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-09T02:21:38Z","message":"[Security
solution] CSS emotion/react fix
(#205934)","sha":"7a63ae2e4cf81786f35a0f54329c39fce8e2245e","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:
SecuritySolution","backport:prev-minor","v8.18.0"],"title":"[Security
solution] CSS emotion/react
fix","number":205934,"url":"https://github.com/elastic/kibana/pull/205934","mergeCommit":{"message":"[Security
solution] CSS emotion/react fix
(#205934)","sha":"7a63ae2e4cf81786f35a0f54329c39fce8e2245e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205934","number":205934,"mergeCommit":{"message":"[Security
solution] CSS emotion/react fix
(#205934)","sha":"7a63ae2e4cf81786f35a0f54329c39fce8e2245e"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Steph Milovic <[email protected]>

Author: kibanamachine

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/settings_flyout/alert_selection/preview_tab/index.tsx

@@ -15,6 +15,7 @@ import {
   EuiText,
   useEuiTheme,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { isEmpty } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
 
@@ -170,7 +171,7 @@ const PreviewTabComponent = ({
         {EmptyPrompt ??
           (attributes && (
             <div
-              css={`
+              css={css`
                 .euiDataGridHeader {
                   background: none;
                   border-top: none;

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table_filters/rule_execution_status_selector.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useState } from 'react';
+import { css } from '@emotion/react';
 import type { EuiSelectableOption } from '@elastic/eui';
 import { EuiFilterButton, EuiPopover, EuiSelectable } from '@elastic/eui';
 import * as i18n from '../../../../../detections/pages/detection_engine/rules/translations';
@@ -107,7 +108,7 @@ const RuleExecutionStatusSelectorComponent = ({
           const status = (option as EuiSelectableOption<OptionData>).status;
           return (
             <div
-              css={`
+              css={css`
                 margin-top: 4px; // aligns the badge within the option
               `}
               data-test-subj="executionStatusFilterOption"
@@ -120,7 +121,7 @@ const RuleExecutionStatusSelectorComponent = ({
       >
         {(list) => (
           <div
-            css={`
+            css={css`
               width: 200px;
             `}
           >

x-pack/solutions/security/plugins/security_solution/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx

@@ -7,6 +7,7 @@
 
 import React, { useCallback } from 'react';
 
+import { css } from '@emotion/react';
 import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
 
 import { NewChat } from '@kbn/elastic-assistant';
@@ -48,7 +49,7 @@ const RuleStatusFailedCallOutComponent: React.FC<RuleStatusFailedCallOutProps> =
 
   return (
     <div
-      css={`
+      css={css`
         pre {
           margin-block-end: 0;
           margin-right: 24px; // Otherwise the copy button overlaps the scrollbar