[8.x] [Security Solution] [EUI Refresh] [Explore page] Migrate styled-components (#207318)

x-pack/solutions/security/plugins/security_solution/emotion.d.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}

x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 

x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/display.tsx

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-export const Display = styled.div<{ show: boolean }>`
-  ${({ show }) => (show ? '' : 'display: none;')};
-`;
+export const Display = styled.div<{ show: boolean }>(({ show }) => ({
+  display: show ? undefined : 'none',
+}));
 
 Display.displayName = 'Display';

x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/hosts.tsx

@@ -6,7 +6,7 @@
  */
 
 import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';