Replace style with css prop in SessionView plugin (elastic#202778)

## Summary

Part of the resolution of this issue: 
- elastic#149246

Removes the `style` prop in React components and elements to avoid using
inline styles. Instead, it uses now the `emotion.css` prop to
dynamically attach all styles to the native `class` attribute.

### Motivation

Using inline styles at scale causes a performance penalty at rendering
time. It's way more efficient to attach styles to a single or several
classnames instead.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Maxim Kholod <maxim.kholod@elastic.co>

x-pack/solutions/security/plugins/session_view/public/components/back_to_investigated_alert/index.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 import React from 'react';
+import { css } from '@emotion/react';
 import { EuiBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useStyles } from './styles';
@@ -29,8 +30,7 @@ export const BackToInvestigatedAlert = ({
   return (
     <div css={styles.container}>
       <EuiBadge
-        style={styles.buttonStyle}
-        css={styles.jumpBackBadge}
+        css={css([styles.jumpBackBadge, styles.buttonStyle])}
         iconType={isDisplayedAbove ? 'arrowUp' : 'arrowDown'}
         iconSide="right"
         onClick={onClick}

x-pack/solutions/security/plugins/session_view/public/components/detail_panel_description_list/index.tsx

@@ -26,8 +26,8 @@ export const DetailPanelDescriptionList = ({ listItems }: DetailPanelDescription
       columnWidths={[2, 3]}
       listItems={listItems}
       css={styles.descriptionList}
-      titleProps={{ style: styles.tabListTitle }}
-      descriptionProps={{ style: styles.tabListDescription }}
+      titleProps={{ css: styles.tabListTitle }}
+      descriptionProps={{ css: styles.tabListDescription }}
       data-test-subj="sessionView:detail-panel-description-list"
     />
   );

x-pack/solutions/security/plugins/session_view/public/components/process_tree_alerts_filter/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useState, useCallback, useMemo } from 'react';
+import { css } from '@emotion/react';
 import {
   EuiContextMenuItem,
   EuiFlexGroup,
@@ -119,7 +120,7 @@ export const ProcessTreeAlertsFilter = ({
   return (
     <div data-test-subj="sessionView:sessionViewAlertDetailsFilter">
       <EuiFlexGroup alignItems="center">
-        <EuiFlexItem css={filterStatus} style={{ paddingLeft: '16px' }}>
+        <EuiFlexItem css={css([filterStatus, { paddingLeft: '16px' }])}>
           <EuiText size="s" data-test-subj="sessionView:sessionViewAlertDetailsFilterStatus">
             {totalAlertsCount === filteredAlertsCount && (
               <FormattedMessage

x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/index.tsx

@@ -172,7 +172,7 @@ export const TTYPlayerControls = ({
             />
           </EuiToolTip>
         </EuiFlexItem>
-        <EuiFlexItem style={{ position: 'relative' }}>
+        <EuiFlexItem css={{ position: 'relative' }}>
           <TTYPlayerControlsMarkers
             processStartMarkers={processStartMarkers}
             linesLength={linesLength}