Replace style with css prop in Cloud Defend plugin (elastic#202449)

## 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: Elastic Machine <[email protected]>
(cherry picked from commit c1addc9)

x-pack/plugins/cloud_defend/public/components/control_general_view_response/index.tsx

@@ -286,7 +286,7 @@ export const ControlGeneralViewResponse = ({
               <b>{i18n.actions}: </b>
               {response.actions?.map((action, i) => (
                 <span key={action}>
-                  <b style={{ color: action === 'block' ? colors.danger : colors.ink }}>
+                  <b css={{ color: action === 'block' ? colors.danger : colors.ink }}>
                     {action[0].toUpperCase() + action.slice(1)}
                   </b>
                   {i !== (response.actions?.length || 0) - 1 && ', '}

x-pack/plugins/cloud_defend/public/pages/policies/index.tsx

@@ -87,7 +87,7 @@ const TotalIntegrationsCount = ({
   pageCount,
   totalCount,
 }: Record<'pageCount' | 'totalCount', number>) => (
-  <EuiText size="xs" style={{ marginLeft: 8 }}>
+  <EuiText size="xs" css={{ marginLeft: 8 }}>
     <EuiTextColor color="subdued">
       <FormattedMessage
         id="xpack.cloudDefend.policies.totalIntegrationsCountMessage"
@@ -108,7 +108,7 @@ const SearchField = ({
 
   return (
     <EuiFlexGroup>
-      <EuiFlexItem grow={true} style={{ alignItems: 'flex-end' }}>
+      <EuiFlexItem grow={true} css={{ alignItems: 'flex-end' }}>
         <EuiFieldSearch
           fullWidth
           onSearch={setLocalValue}

x-pack/plugins/cloud_defend/public/plugin.tsx

@@ -71,7 +71,7 @@ export class CloudDefendPlugin
     const CloudDefendRouter = (props: CloudDefendRouterProps) => (
       <KibanaContextProvider services={{ ...core, ...plugins }}>
         <RedirectAppLinks coreStart={core}>
-          <div style={{ width: '100%', height: '100%' }}>
+          <div css={{ width: '100%', height: '100%' }}>
             <SetupContext.Provider value={{ isCloudEnabled: this.isCloudEnabled }}>
               <Router {...props} />
             </SetupContext.Provider>