From 8dbb57541190b4710c0ad270eda1a590994a7384 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?=
 <albertoblaz@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:16:23 +0100
Subject: [PATCH] Replace inline styles with `css` prop in `src/` folder
 (#201563)

## Summary

Part of the resolution of this issue:
- https://github.com/elastic/kibana/issues/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.

### How to review

From [Emotion's official
docs](https://emotion.sh/docs/css-prop#style-precedence):

> [!NOTE]
> Any component or element that accepts a `className` prop can also use
the `css` prop. The styles supplied to the `css` prop are evaluated and
the computed class name is applied to the `className` prop.

Components that are safe to migrate from `style` to `css`:
- React elements
- React components exposed by EUI (they all support a `className` prop
and the [Babel
plugin](https://www.npmjs.com/package/@emotion/babel-preset-css-prop) is
enabled throughout Kibana)

Components where styling might break:
- Custom component we wrote that currently don't accept a `className`
prop.
- Specific 3P components that pass in a `style` prop to our components
i.e. `react-window` (it calculates the dynamic position of all
virtualized elements and hides the ones outside the visible fold)
- Specific 3P components that expect a `style` prop to be styled i.e.
charts, etc.

### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [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)

### Identify risks

Main risk is breaking the UI by not applying or incorrectly applying the
styling. This was explained in the "How to review" section above. The
risk has **low severity** though. The mitigation plan will simply be
reverting the commit asap not to affect production and test locally
until it's fixed./
---
 .../with_auto_scale.test.tsx.snap             |  1 -
 .../public/components/metric_value.tsx        |  2 +-
 .../public/components/metric_vis.tsx          |  2 +-
 .../public/utils/get_legend_actions.tsx       |  2 +-
 .../components/legend_action_popover.tsx      |  2 +-
 .../public/helpers/annotations.tsx            |  6 ++--
 .../public/static/components/warnings.tsx     |  2 +-
 .../application/components/help_popover.tsx   |  2 +-
 .../application/containers/editor/editor.tsx  |  8 ++---
 .../containers/history/history.tsx            |  2 +-
 .../components/options_list_popover.tsx       |  2 +-
 .../options_list_popover_footer.tsx           |  2 +-
 .../search_session_name.tsx                   |  2 +-
 .../advanced_params_section.tsx               |  2 +-
 .../components/form_fields/type_field.tsx     |  4 +--
 .../advanced_parameters_section.tsx           |  2 +-
 .../__snapshots__/format_editor.test.tsx.snap |  4 +--
 .../__snapshots__/static_lookup.test.tsx.snap | 20 ++++++-------
 .../editors/static_lookup/static_lookup.tsx   |  2 +-
 .../field_format_editor/format_editor.tsx     |  2 +-
 .../components/preview/field_preview.tsx      |  2 +-
 .../preview/field_preview_empty_prompt.tsx    |  2 +-
 .../public/components/add_data_prompt.tsx     |  2 +-
 .../header/__snapshots__/header.test.tsx.snap |  2 +-
 .../components/header/header.tsx              |  2 +-
 .../field_format_editor.test.tsx.snap         |  4 +--
 .../field_format_editor.tsx                   |  2 +-
 .../index_pattern_table.tsx                   |  2 +-
 src/plugins/dev_tools/public/application.tsx  |  2 +-
 .../esql_dataview_transition_modal.tsx        |  2 +-
 .../total_documents/total_documents.tsx       |  2 +-
 .../__snapshots__/table_header.test.tsx.snap  |  4 +--
 .../components/table_header/table_header.tsx  |  2 +-
 .../saved_search_embeddable_base.tsx          |  2 +-
 .../forms/docs/examples/dynamic_fields.mdx    | 10 +++----
 .../docs/examples/fields_composition.mdx      |  4 +--
 .../examples/serializers_deserializers.mdx    |  2 +-
 .../__stories__/use_array_complex.tsx         | 28 ++++++++---------
 .../__stories__/use_array_dynamic_data.tsx    | 28 ++++++++---------
 .../__stories__/use_array_reorder.tsx         |  4 +--
 .../__stories__/use_field_field_types.tsx     |  6 ++--
 .../esql_datagrid/public/create_datagrid.tsx  |  2 +-
 .../public/components/error/error.tsx         |  4 +--
 .../components/error/show_debugging.tsx       |  2 +-
 .../components/repeat_image_component.tsx     |  2 +-
 .../react_expression_renderer.tsx             |  2 +-
 .../components/guide_button_popover.tsx       |  2 +-
 .../components/recently_accessed.js           |  2 +-
 .../instruction_set.test.js.snap              | 12 ++++----
 .../components/tutorial/instruction_set.js    |  2 +-
 .../image_editor/image_editor_flyout.tsx      |  2 +-
 .../components/image_viewer/image_viewer.tsx  |  2 +-
 .../input_control_vis.test.tsx.snap           | 24 +++++++--------
 .../components/vis/input_control_vis.tsx      |  6 +---
 .../__snapshots__/cluster_view.test.tsx.snap  | 30 +++++++++----------
 .../clusters_table/cluster_view.tsx           |  2 +-
 .../public/cluster_configuration_form.tsx     |  2 +-
 .../public/enrollment_token_form.tsx          |  2 +-
 .../public/single_chars_field.tsx             |  6 ++--
 .../action_cards/action_cards.tsx             |  2 +-
 .../elastic_agent_card.test.tsx.snap          | 20 ++++++-------
 .../no_data_card/elastic_agent_card.tsx       |  2 +-
 .../presentation_panel_hover_actions.tsx      |  2 +-
 .../use_presentation_panel_header_actions.tsx |  2 +-
 .../components/labs/environment_switch.tsx    |  6 ++--
 .../components/labs/labs_beaker_button.tsx    |  2 +-
 .../objects_table/components/flyout.tsx       |  2 +-
 .../action_wizard/action_wizard.tsx           |  2 +-
 .../components/action_wizard/test_data.tsx    |  2 +-
 .../drilldown_table/drilldown_table.tsx       |  2 +-
 .../drilldown_template_table.tsx              |  4 +--
 .../components/flyout_frame/flyout_frame.tsx  |  2 +-
 .../text_with_icon/text_with_icon.tsx         |  2 +-
 .../trigger_picker/trigger_picker.tsx         |  2 +-
 .../url_drilldown_collect_config.tsx          |  2 +-
 .../components/variable_popover/index.tsx     |  2 +-
 .../components/doc_viewer_table/table.tsx     |  2 +-
 .../filter_editor/filter_editor.tsx           |  2 +-
 .../filter_bar/filter_item/filter_item.tsx    |  2 +-
 .../query_string_input/add_filter_popover.tsx |  8 ++++-
 .../filter_editor_wrapper.tsx                 |  2 +-
 .../query_string_input/no_data_popover.tsx    |  2 +-
 .../query_string_input/query_bar_top_row.tsx  |  4 +--
 .../query_string_input/query_string_input.tsx |  2 +-
 .../components/sidebar/sidebar_title.tsx      |  2 +-
 .../public/default_editor_controller.tsx      |  2 +-
 .../application/components/aggs/agg_row.tsx   |  2 +-
 .../components/aggs/percentile_ui.js          |  2 +-
 .../switch_mode_popover.tsx                   |  7 ++---
 ...isualization_missed_saved_object_error.tsx |  2 +-
 .../embeddable/visualize_embeddable.tsx       |  4 +--
 91 files changed, 196 insertions(+), 198 deletions(-)

diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap
index 37b8587d6b6af..4acbab635ba47 100644
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap
@@ -29,4 +29,3 @@ exports[`AutoScale withAutoScale renders 1`] = `
   </div>
 </Component>
 `;
-
diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
index e338d1779a10b..8199a2ec1f842 100644
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
@@ -74,7 +74,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
   if (onFilter) {
     return (
       <button
-        style={{ display: 'block' }}
+        css={{ display: 'block' }}
         onClick={() => onFilter()}
         title={i18n.translate('expressionLegacyMetricVis.filterTitle', {
           defaultMessage: 'Click to filter by field',
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
index edfee4f6df539..4a75f5cdf7b00 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@@ -133,7 +133,7 @@ const buildFilterEvent = (rowIdx: number, columnIdx: number, table: Datatable) =
 const getIcon =
   (type: string) =>
   ({ width, height, color }: { width: number; height: number; color: string }) =>
-    <EuiIcon type={type} width={width} height={height} fill={color} style={{ width, height }} />;
+    <EuiIcon type={type} fill={color} style={{ width, height }} />;
 
 export interface MetricVisComponentProps {
   data: Datatable;
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx
index 74260cc87d681..29bf707e73f71 100644
--- a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx
+++ b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx
@@ -125,7 +125,7 @@ export const getLegendActions = (
         ref={ref}
         role="button"
         aria-pressed="false"
-        style={{
+        css={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx
index 5e6d4429e56be..a798ac9b3f232 100644
--- a/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx
+++ b/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx
@@ -103,7 +103,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
       ref={ref}
       role="button"
       aria-pressed="false"
-      style={{
+      css={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 6273980b0465c..cbbeb30a8b87b 100644
--- a/src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -112,7 +112,7 @@ export function MarkerBody({
     return (
       <div
         className="eui-textTruncate"
-        style={{ maxWidth: LINES_MARKER_SIZE * 3 }}
+        css={{ maxWidth: LINES_MARKER_SIZE * 3 }}
         data-test-subj="xyVisAnnotationText"
       >
         {label}
@@ -123,13 +123,13 @@ export function MarkerBody({
     <div
       className="xyDecorationRotatedWrapper"
       data-test-subj="xyVisAnnotationText"
-      style={{
+      css={{
         width: LINES_MARKER_SIZE,
       }}
     >
       <div
         className="eui-textTruncate xyDecorationRotatedWrapper__label"
-        style={{
+        css={{
           maxWidth: LINES_MARKER_SIZE * 3,
         }}
       >
diff --git a/src/plugins/charts/public/static/components/warnings.tsx b/src/plugins/charts/public/static/components/warnings.tsx
index 79ec6cfb3345e..b253918622c52 100644
--- a/src/plugins/charts/public/static/components/warnings.tsx
+++ b/src/plugins/charts/public/static/components/warnings.tsx
@@ -86,7 +86,7 @@ export function Warnings({
           )
         }
       >
-        <div style={{ maxWidth: 512 }}>
+        <div css={{ maxWidth: 512 }}>
           {warnings.map((w, i) => (
             <React.Fragment key={i}>
               <div
diff --git a/src/plugins/console/public/application/components/help_popover.tsx b/src/plugins/console/public/application/components/help_popover.tsx
index 614a132b770e6..c0533ecbcbadd 100644
--- a/src/plugins/console/public/application/components/help_popover.tsx
+++ b/src/plugins/console/public/application/components/help_popover.tsx
@@ -117,7 +117,7 @@ export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPop
 
         <EuiSpacer size="s" />
 
-        <EuiText style={{ width: 300 }} color="subdued" size="s">
+        <EuiText css={{ width: 300 }} color="subdued" size="s">
           <p>
             {i18n.translate('console.helpPopover.description', {
               defaultMessage:
diff --git a/src/plugins/console/public/application/containers/editor/editor.tsx b/src/plugins/console/public/application/containers/editor/editor.tsx
index 9dcd5c9861425..3115414cee25b 100644
--- a/src/plugins/console/public/application/containers/editor/editor.tsx
+++ b/src/plugins/console/public/application/containers/editor/editor.tsx
@@ -135,7 +135,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
         </div>
       ) : null}
       <EuiResizableContainer
-        style={{ height: '100%' }}
+        css={{ height: '100%' }}
         direction={isVerticalLayout ? 'vertical' : 'horizontal'}
         onPanelWidthChange={(sizes) => onPanelSizeChange(sizes)}
         data-test-subj="consoleEditorContainer"
@@ -152,13 +152,13 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
                 grow={true}
                 borderRadius="none"
                 hasShadow={false}
-                style={{ height: '100%' }}
+                css={{ height: '100%' }}
               >
                 <EuiSplitPanel.Inner
                   paddingSize="none"
                   grow={true}
                   className="consoleEditorPanel"
-                  style={{ top: 0, height: 'calc(100% - 40px)' }}
+                  css={{ top: 0, height: 'calc(100% - 40px)' }}
                 >
                   {loading ? (
                     <EditorContentSpinner />
@@ -210,7 +210,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
               tabIndex={0}
               paddingSize="none"
             >
-              <EuiSplitPanel.Outer borderRadius="none" hasShadow={false} style={{ height: '100%' }}>
+              <EuiSplitPanel.Outer borderRadius="none" hasShadow={false} css={{ height: '100%' }}>
                 <EuiSplitPanel.Inner
                   paddingSize="none"
                   css={{ alignContent: 'center', top: 0, height: 'calc(100% - 40px)' }}
diff --git a/src/plugins/console/public/application/containers/history/history.tsx b/src/plugins/console/public/application/containers/history/history.tsx
index 384503e5df084..05c5f6f104422 100644
--- a/src/plugins/console/public/application/containers/history/history.tsx
+++ b/src/plugins/console/public/application/containers/history/history.tsx
@@ -160,7 +160,7 @@ export function History() {
       data-test-subj="consoleHistoryPanel"
     >
       <EuiResizableContainer
-        style={{ height: '100%' }}
+        css={{ height: '100%' }}
         direction={isVerticalLayout ? 'vertical' : 'horizontal'}
       >
         {(EuiResizablePanel, EuiResizableButton) => (
diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover.tsx
index b895b5b398fa7..41f69ab506ca9 100644
--- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover.tsx
+++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover.tsx
@@ -42,7 +42,7 @@ export const OptionsListPopover = () => {
       <div
         data-test-subj={`optionsList-control-available-options`}
         data-option-count={loading ? 0 : Object.keys(availableOptions ?? {}).length}
-        style={{ width: '100%', height: '100%' }}
+        css={{ width: '100%', height: '100%' }}
       >
         <OptionsListPopoverSuggestions showOnlySelected={showOnlySelected} />
         {!showOnlySelected && invalidSelections && invalidSelections.size !== 0 && (
diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx
index 0c4f160f928e7..e17a1dcf32a97 100644
--- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx
+++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx
@@ -56,7 +56,7 @@ export const OptionsListPopoverFooter = () => {
         `}
       >
         {loading && (
-          <div style={{ position: 'absolute', width: '100%' }}>
+          <div css={{ position: 'absolute', width: '100%' }}>
             <EuiProgress
               data-test-subj="optionsList-control-popover-loading"
               size="xs"
diff --git a/src/plugins/data/public/search/session/session_indicator/search_session_indicator/components/search_session_name/search_session_name.tsx b/src/plugins/data/public/search/session/session_indicator/search_session_indicator/components/search_session_name/search_session_name.tsx
index 8a8284c98b876..04821e1a22971 100644
--- a/src/plugins/data/public/search/session/session_indicator/search_session_indicator/components/search_session_name/search_session_name.tsx
+++ b/src/plugins/data/public/search/session/session_indicator/search_session_indicator/components/search_session_name/search_session_name.tsx
@@ -38,7 +38,7 @@ export const SearchSessionName: React.FC<SearchSessionNameProps> = ({ name, edit
       justifyContent={'spaceBetween'}
       gutterSize={'none'}
       // padding to align with compressed input size
-      style={{ paddingTop: 4, paddingBottom: 4 }}
+      css={{ paddingTop: 4, paddingBottom: 4 }}
     >
       <EuiText size={'s'} className={'eui-textTruncate'}>
         <h4 className={'eui-textTruncate'}>{name}</h4>
diff --git a/src/plugins/data_view_editor/public/components/advanced_params_content/advanced_params_section.tsx b/src/plugins/data_view_editor/public/components/advanced_params_content/advanced_params_section.tsx
index e64c7f7939747..fbf7957007e5f 100644
--- a/src/plugins/data_view_editor/public/components/advanced_params_content/advanced_params_section.tsx
+++ b/src/plugins/data_view_editor/public/components/advanced_params_content/advanced_params_section.tsx
@@ -36,7 +36,7 @@ export const AdvancedParamsSection = ({ children, defaultVisible = false }: Prop
             })}
       </EuiButtonEmpty>
 
-      <div style={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
+      <div css={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
         <EuiSpacer size="m" />
         {/* We ned to wrap the children inside a "div" to have our css :first-child rule */}
         <div>{children}</div>
diff --git a/src/plugins/data_view_editor/public/components/form_fields/type_field.tsx b/src/plugins/data_view_editor/public/components/form_fields/type_field.tsx
index dd2307595ce77..9a40f86bf1ce7 100644
--- a/src/plugins/data_view_editor/public/components/form_fields/type_field.tsx
+++ b/src/plugins/data_view_editor/public/components/form_fields/type_field.tsx
@@ -32,7 +32,7 @@ interface TypeFieldProps {
 }
 
 const standardSelectItem = (
-  <EuiDescriptionList style={{ whiteSpace: 'nowrap' }} data-test-subj="standardType">
+  <EuiDescriptionList css={{ whiteSpace: 'nowrap' }} data-test-subj="standardType">
     <EuiDescriptionListTitle>
       <FormattedMessage
         id="indexPatternEditor.typeSelect.standardTitle"
@@ -49,7 +49,7 @@ const standardSelectItem = (
 );
 
 const rollupSelectItem = (
-  <EuiDescriptionList style={{ whiteSpace: 'nowrap' }} data-test-subj="rollupType">
+  <EuiDescriptionList css={{ whiteSpace: 'nowrap' }} data-test-subj="rollupType">
     <EuiDescriptionListTitle>
       <FormattedMessage
         id="indexPatternEditor.typeSelect.rollupTitle"
diff --git a/src/plugins/data_view_field_editor/public/components/field_editor/advanced_parameters_section.tsx b/src/plugins/data_view_field_editor/public/components/field_editor/advanced_parameters_section.tsx
index 05445157fd888..9bbfc5b8cd802 100644
--- a/src/plugins/data_view_field_editor/public/components/field_editor/advanced_parameters_section.tsx
+++ b/src/plugins/data_view_field_editor/public/components/field_editor/advanced_parameters_section.tsx
@@ -35,7 +35,7 @@ export const AdvancedParametersSection = ({ children }: Props) => {
             })}
       </EuiButtonEmpty>
 
-      <div style={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
+      <div css={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
         <EuiSpacer size="m" />
         {/* We ned to wrap the children inside a "div" to have our css :first-child rule */}
         <div>{children}</div>
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap b/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap
index 95417e671901a..7a27e35e2dedf 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`FieldFormatEditor should render normally 1`] = `
   <Suspense
     fallback={
       <div
-        style={
+        css={
           Object {
             "marginTop": 8,
             "minHeight": 430,
@@ -38,7 +38,7 @@ exports[`FieldFormatEditor should render nothing if there is no editor for the f
   <Suspense
     fallback={
       <div
-        style={
+        css={
           Object {
             "marginTop": 8,
             "minHeight": 430,
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.tsx.snap b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.tsx.snap
index c58a28f6af6de..6b6322b618a30 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.tsx.snap
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.tsx.snap
@@ -40,6 +40,11 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
         },
       ]
     }
+    css={
+      Object {
+        "maxWidth": "400px",
+      }
+    }
     items={
       Array [
         Object {
@@ -59,11 +64,6 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
         token="euiBasicTable.noItemsMessage"
       />
     }
-    style={
-      Object {
-        "maxWidth": "400px",
-      }
-    }
     tableLayout="fixed"
   />
   <EuiSpacer
@@ -144,6 +144,11 @@ exports[`StaticLookupFormatEditor should render normally 1`] = `
         },
       ]
     }
+    css={
+      Object {
+        "maxWidth": "400px",
+      }
+    }
     items={
       Array [
         Object {
@@ -157,11 +162,6 @@ exports[`StaticLookupFormatEditor should render normally 1`] = `
         token="euiBasicTable.noItemsMessage"
       />
     }
-    style={
-      Object {
-        "maxWidth": "400px",
-      }
-    }
     tableLayout="fixed"
   />
   <EuiSpacer
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx
index 2ac7d424741f0..d6bd4d2e6279b 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx
@@ -154,7 +154,7 @@ export class StaticLookupFormatEditor extends DefaultFormatEditor<StaticLookupFo
 
     return (
       <Fragment>
-        <EuiBasicTable items={items} columns={columns} style={{ maxWidth: '400px' }} />
+        <EuiBasicTable items={items} columns={columns} css={{ maxWidth: '400px' }} />
         <EuiSpacer size="m" />
         <EuiButton
           iconType="plusInCircle"
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx
index a815c92b81ab3..a0931bb18a0d3 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx
@@ -64,7 +64,7 @@ export class FormatEditor extends PureComponent<FormatEditorProps, FormatEditorS
             fallback={
               // We specify minHeight to avoid too mitigate layout shifts while loading an editor
               // ~430 corresponds to "4 lines" of EuiSkeletonText
-              <div style={{ minHeight: 430, marginTop: 8 }}>
+              <div css={{ minHeight: 430, marginTop: 8 }}>
                 <EuiDelayRender>
                   <EuiSkeletonText lines={4} />
                 </EuiDelayRender>
diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_preview.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_preview.tsx
index cecebfb1bdb6d..35b7d21ead27d 100644
--- a/src/plugins/data_view_field_editor/public/components/preview/field_preview.tsx
+++ b/src/plugins/data_view_field_editor/public/components/preview/field_preview.tsx
@@ -148,7 +148,7 @@ export const FieldPreview = () => {
                   {/* List of other fields in the document */}
                   <EuiResizeObserver onResize={onFieldListResize}>
                     {(resizeRef) => (
-                      <div ref={resizeRef} style={{ flex: 1 }}>
+                      <div ref={resizeRef} css={{ flex: 1 }}>
                         <PreviewFieldList
                           height={fieldListHeight}
                           clearSearch={() => setSearchValue('')}
diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_preview_empty_prompt.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_preview_empty_prompt.tsx
index 9872687a0363a..7a66c5cec5ae4 100644
--- a/src/plugins/data_view_field_editor/public/components/preview/field_preview_empty_prompt.tsx
+++ b/src/plugins/data_view_field_editor/public/components/preview/field_preview_empty_prompt.tsx
@@ -13,7 +13,7 @@ import { EuiEmptyPrompt, EuiText, EuiTextColor, EuiFlexGroup, EuiFlexItem } from
 
 export const FieldPreviewEmptyPrompt = () => {
   return (
-    <EuiFlexGroup style={{ height: '100%' }} data-test-subj="emptyPrompt">
+    <EuiFlexGroup css={{ height: '100%' }} data-test-subj="emptyPrompt">
       <EuiFlexItem>
         <EuiEmptyPrompt
           iconType="inspect"
diff --git a/src/plugins/data_view_management/public/components/add_data_prompt.tsx b/src/plugins/data_view_management/public/components/add_data_prompt.tsx
index c3049081b5da4..7da671650656a 100644
--- a/src/plugins/data_view_management/public/components/add_data_prompt.tsx
+++ b/src/plugins/data_view_management/public/components/add_data_prompt.tsx
@@ -105,7 +105,7 @@ export const AddDataPrompt: React.FC<AddDataPromptComponentProps> = ({
         return { default: DataViewIllustration };
       })
     ),
-    <EuiPanel color="subdued" style={{ width: 226, height: 206 }} />
+    <EuiPanel color="subdued" css={{ width: 226, height: 206 }} />
   );
 
   return (
diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap
index 4ee28d1410ee0..40cd0974b163b 100644
--- a/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap
@@ -16,9 +16,9 @@ exports[`Header should render normally 1`] = `
         </span>
         <br />
         <span
+          class="emotion-EuiIcon"
           color="warning"
           data-euiicon-type="warning"
-          style="margin-right: 4px;"
         />
         <span>
           Scripted fields are deprecated. Use 
diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx
index 6c8af2c5b9c02..2acfee2d78648 100644
--- a/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx
+++ b/src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx
@@ -37,7 +37,7 @@ export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => {
               defaultMessage="Scripted fields can be used in visualizations and displayed in documents. However, they cannot be searched."
             />
             <br />
-            <EuiIcon type="warning" color="warning" style={{ marginRight: '4px' }} />
+            <EuiIcon type="warning" color="warning" css={{ marginRight: '4px' }} />
             <FormattedMessage
               id="indexPatternManagement.editIndexPattern.deprecation"
               tagName="span"
diff --git a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
index 95417e671901a..7a27e35e2dedf 100644
--- a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
+++ b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`FieldFormatEditor should render normally 1`] = `
   <Suspense
     fallback={
       <div
-        style={
+        css={
           Object {
             "marginTop": 8,
             "minHeight": 430,
@@ -38,7 +38,7 @@ exports[`FieldFormatEditor should render nothing if there is no editor for the f
   <Suspense
     fallback={
       <div
-        style={
+        css={
           Object {
             "marginTop": 8,
             "minHeight": 430,
diff --git a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
index 05eda5b41a4e6..c2e5855f00d40 100644
--- a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
+++ b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
@@ -69,7 +69,7 @@ export class FieldFormatEditor extends PureComponent<
             fallback={
               // We specify minHeight to avoid too mitigate layout shifts while loading an editor
               // ~430 corresponds to "4 lines" of EuiSkeletonText
-              <div style={{ minHeight: 430, marginTop: 8 }}>
+              <div css={{ minHeight: 430, marginTop: 8 }}>
                 <EuiDelayRender>
                   <EuiSkeletonText lines={4} />
                 </EuiDelayRender>
diff --git a/src/plugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx b/src/plugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx
index daabfe3fe6a9a..19aa7c89940fd 100644
--- a/src/plugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx
+++ b/src/plugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx
@@ -411,7 +411,7 @@ export const IndexPatternTable = ({
   return (
     <div data-test-subj="indexPatternTable" role="region" aria-label={title}>
       {isLoadingDataState ? (
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <div css={{ display: 'flex', justifyContent: 'center' }}>
           <EuiLoadingSpinner size="xxl" />
         </div>
       ) : (
diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
index f58441cd6ddcc..0b66621fb2e9d 100644
--- a/src/plugins/dev_tools/public/application.tsx
+++ b/src/plugins/dev_tools/public/application.tsx
@@ -75,7 +75,7 @@ function DevToolsWrapper({
 
   return (
     <main className="devApp">
-      <EuiTabs style={{ paddingLeft: euiThemeVars.euiSizeS }} size="l">
+      <EuiTabs css={{ paddingLeft: euiThemeVars.euiSizeS }} size="l">
         {devTools.map((currentDevTool) => (
           <EuiTab
             key={currentDevTool.id}
diff --git a/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx b/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx
index baa727c0f2365..342d8c4f1684b 100644
--- a/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx
+++ b/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx
@@ -42,7 +42,7 @@ export default function ESQLToDataViewTransitionModal({
   return (
     <EuiModal
       onClose={() => onClose()}
-      style={{ width: 700 }}
+      css={{ width: 700 }}
       data-test-subj="discover-esql-to-dataview-modal"
     >
       <EuiModalHeader>
diff --git a/src/plugins/discover/public/application/main/components/total_documents/total_documents.tsx b/src/plugins/discover/public/application/main/components/total_documents/total_documents.tsx
index 5644efc8a9bbd..053d1b3362bd1 100644
--- a/src/plugins/discover/public/application/main/components/total_documents/total_documents.tsx
+++ b/src/plugins/discover/public/application/main/components/total_documents/total_documents.tsx
@@ -28,7 +28,7 @@ export const TotalDocuments = ({
     <EuiText
       grow={false}
       size="s"
-      style={{ paddingRight: 2 }}
+      css={{ paddingRight: 2 }}
       data-test-subj="savedSearchTotalDocuments"
     >
       {isEsqlMode ? (
diff --git a/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap b/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
index 22e4b3a0d9657..2b44ac56c64ae 100644
--- a/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
+++ b/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`TableHeader with time column renders correctly 1`] = `
   data-test-subj="docTableHeader"
 >
   <th
-    style="width: 24px;"
+    css="[object Object]"
   />
   <th
     data-test-subj="docTableHeaderField"
@@ -211,7 +211,7 @@ exports[`TableHeader without time column renders correctly 1`] = `
   data-test-subj="docTableHeader"
 >
   <th
-    style="width: 24px;"
+    css="[object Object]"
   />
   <th
     data-test-subj="docTableHeaderField"
diff --git a/src/plugins/discover/public/components/doc_table/components/table_header/table_header.tsx b/src/plugins/discover/public/components/doc_table/components/table_header/table_header.tsx
index 04583c893841f..4a3e1e1897a9f 100644
--- a/src/plugins/discover/public/components/doc_table/components/table_header/table_header.tsx
+++ b/src/plugins/discover/public/components/doc_table/components/table_header/table_header.tsx
@@ -47,7 +47,7 @@ export function TableHeader({
 
   return (
     <tr data-test-subj="docTableHeader" className="kbnDocTableHeader">
-      <th style={{ width: '24px' }} />
+      <th css={{ width: '24px' }} />
       {displayedColumns.map((col, index) => {
         return (
           <TableHeaderColumn
diff --git a/src/plugins/discover/public/embeddable/components/saved_search_embeddable_base.tsx b/src/plugins/discover/public/embeddable/components/saved_search_embeddable_base.tsx
index deea7aa43c9fc..f723ae1ea7495 100644
--- a/src/plugins/discover/public/embeddable/components/saved_search_embeddable_base.tsx
+++ b/src/plugins/discover/public/embeddable/components/saved_search_embeddable_base.tsx
@@ -69,7 +69,7 @@ export const SavedSearchEmbeddableBase: FC<PropsWithChildren<SavedSearchEmbeddab
         </EuiFlexItem>
       )}
 
-      <EuiFlexItem style={{ minHeight: 0 }}>{children}</EuiFlexItem>
+      <EuiFlexItem css={{ minHeight: 0 }}>{children}</EuiFlexItem>
 
       {Boolean(append) && <EuiFlexItem grow={false}>{append}</EuiFlexItem>}
 
diff --git a/src/plugins/es_ui_shared/static/forms/docs/examples/dynamic_fields.mdx b/src/plugins/es_ui_shared/static/forms/docs/examples/dynamic_fields.mdx
index 82516423424f6..e48e5192f189e 100644
--- a/src/plugins/es_ui_shared/static/forms/docs/examples/dynamic_fields.mdx
+++ b/src/plugins/es_ui_shared/static/forms/docs/examples/dynamic_fields.mdx
@@ -65,7 +65,7 @@ export const DynamicFields = () => {
                       onClick={() => removeItem(item.id)}
                       iconType="minusInCircle"
                       aria-label="Remove item"
-                      style={{ marginTop: '28px' }}
+                      css={{ marginTop: '28px' }}
                     />
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -155,7 +155,7 @@ export const DynamicFieldsValidation = () => {
                           onClick={() => removeItem(item.id)}
                           iconType="minusInCircle"
                           aria-label="Remove item"
-                          style={{ marginTop: '28px' }}
+                          css={{ marginTop: '28px' }}
                         />
                       </EuiFlexItem>
                     </EuiFlexGroup>
@@ -218,7 +218,7 @@ export const DynamicFieldsReorder = () => {
                             return (
                               <EuiFlexGroup key={item.id}>
                                 <EuiFlexItem grow={false}>
-                                  <div {...provided.dragHandleProps} style={{ marginTop: '30px' }}>
+                                  <div {...provided.dragHandleProps} css={{ marginTop: '30px' }}>
                                     <EuiIcon type="grab" />
                                   </div>
                                 </EuiFlexItem>
@@ -245,7 +245,7 @@ export const DynamicFieldsReorder = () => {
                                     onClick={() => removeItem(item.id)}
                                     iconType="minusInCircle"
                                     aria-label="Remove item"
-                                    style={{ marginTop: '28px' }}
+                                    css={{ marginTop: '28px' }}
                                   />
                                 </EuiFlexItem>
                               </EuiFlexGroup>
@@ -273,4 +273,4 @@ export const DynamicFieldsReorder = () => {
     </Form>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/src/plugins/es_ui_shared/static/forms/docs/examples/fields_composition.mdx b/src/plugins/es_ui_shared/static/forms/docs/examples/fields_composition.mdx
index 7e7cce5e81332..0851440400814 100644
--- a/src/plugins/es_ui_shared/static/forms/docs/examples/fields_composition.mdx
+++ b/src/plugins/es_ui_shared/static/forms/docs/examples/fields_composition.mdx
@@ -7,8 +7,8 @@ tags: ['forms', 'kibana', 'dev']
 date: 2021-04-14
 ---
 
-If your form does not have a fix set of fields (single interface) and you need to add/remove fields dynamically, you can leverage the power of field composition with the form lib. It let's you swap fields in your form whenever needed. Any field that **is not in the DOM** is automatically cleared when unmounting and its value won't be returned in the form data.  
-If you _do_ need to keep a field value, but hide the field in the UI, then you need to use CSS (`<div style={{ display: isVisible ? 'block' : 'none' }}>...</div>`)
+If your form does not have a fix set of fields (single interface) and you need to add/remove fields dynamically, you can leverage the power of field composition with the form lib. It let's you swap fields in your form whenever needed. Any field that **is not in the DOM** is automatically cleared when unmounting and its value won't be returned in the form data.
+If you _do_ need to keep a field value, but hide the field in the UI, then you need to use CSS (`<div css={{ display: isVisible ? 'block' : 'none' }}>...</div>`)
 
 Imagine you're building an app that lets people buy a car online. You want to build a form that lets the user select the model of the car (`sedan`, `golf cart`, `clown mobile`), and based on their selection you'll show a different form for configuring the selected model's options.
 
diff --git a/src/plugins/es_ui_shared/static/forms/docs/examples/serializers_deserializers.mdx b/src/plugins/es_ui_shared/static/forms/docs/examples/serializers_deserializers.mdx
index dd3b402e85e3f..3ab849d262db2 100644
--- a/src/plugins/es_ui_shared/static/forms/docs/examples/serializers_deserializers.mdx
+++ b/src/plugins/es_ui_shared/static/forms/docs/examples/serializers_deserializers.mdx
@@ -90,7 +90,7 @@ export const SerializersAndDeserializers = () => {
       <EuiSpacer />
 
       {/* We don't remove it from the DOM as we would lose the value entered in the field. */}
-      <div style={{ display: showAdvancedSettings ? 'block' : 'none' }}>
+      <div css={{ display: showAdvancedSettings ? 'block' : 'none' }}>
         <UseField path="customLabel" component={TextField} />
       </div>
       <EuiSpacer />
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_complex.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_complex.tsx
index f920eb91ea3cc..b777ecd4a85b8 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_complex.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_complex.tsx
@@ -43,7 +43,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Percentage 1
       </EuiHealth>
     ),
@@ -51,7 +51,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Percentage 2
       </EuiHealth>
     ),
@@ -59,7 +59,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Percentage 3
       </EuiHealth>
     ),
@@ -70,7 +70,7 @@ const valueOptions = [
   {
     value: 'value_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Value 1
       </EuiHealth>
     ),
@@ -78,7 +78,7 @@ const valueOptions = [
   {
     value: 'value_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Value 2
       </EuiHealth>
     ),
@@ -86,7 +86,7 @@ const valueOptions = [
   {
     value: 'value_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Value 3
       </EuiHealth>
     ),
@@ -188,7 +188,7 @@ const ProcessorsConfigurator: FC<{ ruleType: string }> = ({ ruleType }) => {
                       component={TextField}
                       componentProps={{
                         euiFieldProps: {
-                          style: {
+                          css: {
                             maxWidth: '180px',
                           },
                         },
@@ -303,7 +303,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Percentage 1
       </EuiHealth>
     ),
@@ -311,7 +311,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Percentage 2
       </EuiHealth>
     ),
@@ -319,7 +319,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Percentage 3
       </EuiHealth>
     ),
@@ -330,7 +330,7 @@ const valueOptions = [
   {
     value: 'value_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Value 1
       </EuiHealth>
     ),
@@ -338,7 +338,7 @@ const valueOptions = [
   {
     value: 'value_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Value 2
       </EuiHealth>
     ),
@@ -346,7 +346,7 @@ const valueOptions = [
   {
     value: 'value_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Value 3
       </EuiHealth>
     ),
@@ -448,7 +448,7 @@ const ProcessorsConfigurator: FC<{ ruleType: string }> = ({ ruleType }) => {
                       component={TextField}
                       componentProps={{
                         euiFieldProps: {
-                          style: {
+                          css: {
                             maxWidth: '180px',
                           },
                         },
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_dynamic_data.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_dynamic_data.tsx
index 83beef1fc8387..098919fb96c2a 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_dynamic_data.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_dynamic_data.tsx
@@ -46,7 +46,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Percentage 1
       </EuiHealth>
     ),
@@ -54,7 +54,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Percentage 2
       </EuiHealth>
     ),
@@ -62,7 +62,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Percentage 3
       </EuiHealth>
     ),
@@ -73,7 +73,7 @@ const valueOptions = [
   {
     value: 'value_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Value 1
       </EuiHealth>
     ),
@@ -81,7 +81,7 @@ const valueOptions = [
   {
     value: 'value_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Value 2
       </EuiHealth>
     ),
@@ -89,7 +89,7 @@ const valueOptions = [
   {
     value: 'value_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Value 3
       </EuiHealth>
     ),
@@ -223,7 +223,7 @@ const ProcessorsConfigurator: FC<{ ruleType: string }> = ({ ruleType }) => {
                       component={TextField}
                       componentProps={{
                         euiFieldProps: {
-                          style: {
+                          css: {
                             maxWidth: '180px',
                           },
                         },
@@ -384,7 +384,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Percentage 1
       </EuiHealth>
     ),
@@ -392,7 +392,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Percentage 2
       </EuiHealth>
     ),
@@ -400,7 +400,7 @@ const percentageOptions = [
   {
     value: 'percentage_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Percentage 3
       </EuiHealth>
     ),
@@ -411,7 +411,7 @@ const valueOptions = [
   {
     value: 'value_config_1',
     inputDisplay: (
-      <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
         Value 1
       </EuiHealth>
     ),
@@ -419,7 +419,7 @@ const valueOptions = [
   {
     value: 'value_config_2',
     inputDisplay: (
-      <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
         Value 2
       </EuiHealth>
     ),
@@ -427,7 +427,7 @@ const valueOptions = [
   {
     value: 'value_config_3',
     inputDisplay: (
-      <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+      <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
         Value 3
       </EuiHealth>
     ),
@@ -561,7 +561,7 @@ const ProcessorsConfigurator: FC<{ ruleType: string }> = ({ ruleType }) => {
                       component={TextField}
                       componentProps={{
                         euiFieldProps: {
-                          style: {
+                          css: {
                             maxWidth: '180px',
                           },
                         },
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_reorder.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_reorder.tsx
index fb56fded77e3a..807412a33a92b 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_reorder.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_array_reorder.tsx
@@ -87,7 +87,7 @@ export function Reorder() {
                                 <EuiFlexItem grow={false}>
                                   <div
                                     {...provided.dragHandleProps}
-                                    style={{ marginTop: '20px' }}
+                                    css={{ marginTop: '20px' }}
                                     aria-label="Change row order"
                                   >
                                     <EuiIcon type="grab" />
@@ -214,7 +214,7 @@ const MyFormComponent = () => {
                               <EuiFlexItem grow={false}>
                                 <div
                                   {...provided.dragHandleProps}
-                                  style={{ marginTop: '20px' }}
+                                  css={{ marginTop: '20px' }}
                                   aria-label="Change row order"
                                 >
                                   <EuiIcon type="grab" />
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_field_field_types.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_field_field_types.tsx
index c24df488ce8a0..18b4cf2fd1d48 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_field_field_types.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/__stories__/use_field_field_types.tsx
@@ -98,7 +98,7 @@ const getPropsForType = (type: FieldType) => {
               {
                 value: 'warning',
                 inputDisplay: (
-                  <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+                  <EuiHealth color="subdued" css={{ lineHeight: 'inherit' }}>
                     Warning
                   </EuiHealth>
                 ),
@@ -107,7 +107,7 @@ const getPropsForType = (type: FieldType) => {
               {
                 value: 'minor',
                 inputDisplay: (
-                  <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+                  <EuiHealth color="warning" css={{ lineHeight: 'inherit' }}>
                     Minor
                   </EuiHealth>
                 ),
@@ -115,7 +115,7 @@ const getPropsForType = (type: FieldType) => {
               {
                 value: 'critical',
                 inputDisplay: (
-                  <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+                  <EuiHealth color="danger" css={{ lineHeight: 'inherit' }}>
                     Critical
                   </EuiHealth>
                 ),
diff --git a/src/plugins/esql_datagrid/public/create_datagrid.tsx b/src/plugins/esql_datagrid/public/create_datagrid.tsx
index 7df7d84fb8080..4c281519edfb8 100644
--- a/src/plugins/esql_datagrid/public/create_datagrid.tsx
+++ b/src/plugins/esql_datagrid/public/create_datagrid.tsx
@@ -44,7 +44,7 @@ export const ESQLDataGrid = (props: ESQLDataGridProps) => {
   }, []);
 
   const getWrapper = (children: JSX.Element) => {
-    return props.fullHeight ? <div style={{ height: 500 }}>{children}</div> : <>{children}</>;
+    return props.fullHeight ? <div css={{ height: 500 }}>{children}</div> : <>{children}</>;
   };
 
   const deps = value?.[0];
diff --git a/src/plugins/expression_error/public/components/error/error.tsx b/src/plugins/expression_error/public/components/error/error.tsx
index fac0ee484fb06..93e10470c320e 100644
--- a/src/plugins/expression_error/public/components/error/error.tsx
+++ b/src/plugins/expression_error/public/components/error/error.tsx
@@ -40,14 +40,14 @@ export const Error: FC<Props> = ({ payload, onClose }) => {
 
   return (
     <EuiCallOut
-      style={{ maxWidth: 500 }}
+      css={{ maxWidth: 500 }}
       color="danger"
       iconType={CloseIconButton}
       title={strings.getTitle()}
     >
       <p>{message ? strings.getDescription() : ''}</p>
       {message && (
-        <p style={{ padding: '0 16px' }}>
+        <p css={{ padding: '0 16px' }}>
           <Markdown readOnly>{message}</Markdown>
         </p>
       )}
diff --git a/src/plugins/expression_error/public/components/error/show_debugging.tsx b/src/plugins/expression_error/public/components/error/show_debugging.tsx
index ddb9cbeea7a19..49ef1acb90d3d 100644
--- a/src/plugins/expression_error/public/components/error/show_debugging.tsx
+++ b/src/plugins/expression_error/public/components/error/show_debugging.tsx
@@ -24,7 +24,7 @@ export const ShowDebugging: FC<Props> = ({ payload }) => {
         See Details
       </EuiButtonEmpty>
       {expanded && (
-        <div style={{ height: 260 }}>
+        <div css={{ height: 260 }}>
           <Debug payload={payload} />
         </div>
       )}
diff --git a/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx b/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
index bdc28e714cd8f..82b21e60c8453 100644
--- a/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
+++ b/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
@@ -94,7 +94,7 @@ export function RepeatImageComponent({
   }
 
   return (
-    <div className="repeatImage" style={{ pointerEvents: 'none' }}>
+    <div className="repeatImage" css={{ pointerEvents: 'none' }}>
       {imagesToRender}
     </div>
   );
diff --git a/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx b/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx
index 32c7d85fa5695..eb9bc34d40b3e 100644
--- a/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx
+++ b/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx
@@ -61,7 +61,7 @@ export function ReactExpressionRenderer({
     <div {...dataAttrs} className={classes}>
       {isEmpty && <PanelLoader />}
       {isLoading && (
-        <EuiProgress size="xs" color="accent" position="absolute" style={{ zIndex: 1 }} />
+        <EuiProgress size="xs" color="accent" position="absolute" css={{ zIndex: 1 }} />
       )}
       {!isLoading && error && renderError?.(error.message, error)}
       <div className="expExpressionRenderer__expression" style={expressionStyles} ref={nodeRef} />
diff --git a/src/plugins/guided_onboarding/public/components/guide_button_popover.tsx b/src/plugins/guided_onboarding/public/components/guide_button_popover.tsx
index 4fa03569756a4..fccfaef00e77f 100644
--- a/src/plugins/guided_onboarding/public/components/guide_button_popover.tsx
+++ b/src/plugins/guided_onboarding/public/components/guide_button_popover.tsx
@@ -51,7 +51,7 @@ export const GuideButtonPopover = ({
         </EuiTitle>
       )}
       <EuiSpacer />
-      <EuiText size="s" style={{ width: 300 }}>
+      <EuiText size="s" css={{ width: 300 }}>
         {description && <p>{description}</p>}
       </EuiText>
     </EuiPopover>
diff --git a/src/plugins/home/public/application/components/recently_accessed.js b/src/plugins/home/public/application/components/recently_accessed.js
index e873b5eda5996..be9d8d0ac1923 100644
--- a/src/plugins/home/public/application/components/recently_accessed.js
+++ b/src/plugins/home/public/application/components/recently_accessed.js
@@ -58,7 +58,7 @@ export class RecentlyAccessed extends Component {
     for (let i = NUM_LONG_LINKS; i < this.props.recentlyAccessed.length; i++) {
       dropdownLinks.push(
         <li
-          style={{ marginBottom: 8 }}
+          css={{ marginBottom: 8 }}
           key={this.props.recentlyAccessed[i].id}
           data-test-subj={`moreRecentlyAccessedItem${this.props.recentlyAccessed[i].id}`}
         >
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
index 5235392121ab0..b11a936807c9f 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
@@ -7,7 +7,7 @@ exports[`render 1`] = `
     paddingSize="none"
   >
     <EuiTabs
-      style={
+      css={
         Object {
           "padding": "0 24px",
         }
@@ -102,7 +102,7 @@ exports[`statusCheckState checking status 1`] = `
     paddingSize="none"
   >
     <EuiTabs
-      style={
+      css={
         Object {
           "padding": "0 24px",
         }
@@ -216,7 +216,7 @@ exports[`statusCheckState failed status check - error 1`] = `
     paddingSize="none"
   >
     <EuiTabs
-      style={
+      css={
         Object {
           "padding": "0 24px",
         }
@@ -339,7 +339,7 @@ exports[`statusCheckState failed status check - no data 1`] = `
     paddingSize="none"
   >
     <EuiTabs
-      style={
+      css={
         Object {
           "padding": "0 24px",
         }
@@ -462,7 +462,7 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
     paddingSize="none"
   >
     <EuiTabs
-      style={
+      css={
         Object {
           "padding": "0 24px",
         }
@@ -576,7 +576,7 @@ exports[`statusCheckState successful status check 1`] = `
     paddingSize="none"
   >
     <EuiTabs
-      style={
+      css={
         Object {
           "padding": "0 24px",
         }
diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.js b/src/plugins/home/public/application/components/tutorial/instruction_set.js
index 17cc4a3a729a9..a4c64894bea95 100644
--- a/src/plugins/home/public/application/components/tutorial/instruction_set.js
+++ b/src/plugins/home/public/application/components/tutorial/instruction_set.js
@@ -278,7 +278,7 @@ class InstructionSetUi extends React.Component {
     return (
       <EuiSplitPanel.Outer>
         <EuiSplitPanel.Inner color="subdued" paddingSize="none">
-          <EuiTabs style={{ padding: `0 ${euiThemeVars.euiSizeL}` }}>{this.renderTabs()}</EuiTabs>
+          <EuiTabs css={{ padding: `0 ${euiThemeVars.euiSizeL}` }}>{this.renderTabs()}</EuiTabs>
         </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="l">
           {this.renderHeader()}
diff --git a/src/plugins/image_embeddable/public/components/image_editor/image_editor_flyout.tsx b/src/plugins/image_embeddable/public/components/image_editor/image_editor_flyout.tsx
index 1a5ee3bc64e1d..0a680e317dc72 100644
--- a/src/plugins/image_embeddable/public/components/image_editor/image_editor_flyout.tsx
+++ b/src/plugins/image_embeddable/public/components/image_editor/image_editor_flyout.tsx
@@ -205,7 +205,7 @@ export function ImageEditorFlyout(props: ImageEditorFlyoutProps) {
                       </div>
                     }
                   />
-                  <p style={{ textAlign: 'center' }}>
+                  <p css={{ textAlign: 'center' }}>
                     <EuiLink
                       onClick={() => setIsFilePickerOpen(true)}
                       data-test-subj="imageEmbeddableEditorSelectFiles"
diff --git a/src/plugins/image_embeddable/public/components/image_viewer/image_viewer.tsx b/src/plugins/image_embeddable/public/components/image_viewer/image_viewer.tsx
index 4eb8edc0a0695..ff4b2233a97d3 100644
--- a/src/plugins/image_embeddable/public/components/image_viewer/image_viewer.tsx
+++ b/src/plugins/image_embeddable/public/components/image_viewer/image_viewer.tsx
@@ -126,7 +126,7 @@ export function ImageViewer({
       )}
       {onClear && (
         <EuiButtonIcon
-          style={{ position: 'absolute', top: '-4px', right: '-4px' }}
+          css={{ position: 'absolute', top: '-4px', right: '-4px' }}
           display="fill"
           iconType="cross"
           aria-label="Clear"
diff --git a/src/plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap b/src/plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap
index 793bf55d69bd3..3a559ee02b237 100644
--- a/src/plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap
+++ b/src/plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap
@@ -11,13 +11,13 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
       wrap={true}
     >
       <EuiFlexItem
-        data-test-subj="inputControlItem"
-        key="mock-list-control"
-        style={
+        css={
           Object {
             "minWidth": "250px",
           }
         }
+        data-test-subj="inputControlItem"
+        key="mock-list-control"
       >
         <injectIntl(ListControlUi)
           controlIndex={0}
@@ -99,13 +99,13 @@ exports[`Clear btns enabled when there are values 1`] = `
       wrap={true}
     >
       <EuiFlexItem
-        data-test-subj="inputControlItem"
-        key="mock-list-control"
-        style={
+        css={
           Object {
             "minWidth": "250px",
           }
         }
+        data-test-subj="inputControlItem"
+        key="mock-list-control"
       >
         <injectIntl(ListControlUi)
           controlIndex={0}
@@ -187,13 +187,13 @@ exports[`Renders list control 1`] = `
       wrap={true}
     >
       <EuiFlexItem
-        data-test-subj="inputControlItem"
-        key="mock-list-control"
-        style={
+        css={
           Object {
             "minWidth": "250px",
           }
         }
+        data-test-subj="inputControlItem"
+        key="mock-list-control"
       >
         <injectIntl(ListControlUi)
           controlIndex={0}
@@ -275,13 +275,13 @@ exports[`Renders range control 1`] = `
       wrap={true}
     >
       <EuiFlexItem
-        data-test-subj="inputControlItem"
-        key="mock-range-control"
-        style={
+        css={
           Object {
             "minWidth": "250px",
           }
         }
+        data-test-subj="inputControlItem"
+        key="mock-range-control"
       >
         <RangeControl
           control={
diff --git a/src/plugins/input_control_vis/public/components/vis/input_control_vis.tsx b/src/plugins/input_control_vis/public/components/vis/input_control_vis.tsx
index c3e5732e46a12..852c70597c553 100644
--- a/src/plugins/input_control_vis/public/components/vis/input_control_vis.tsx
+++ b/src/plugins/input_control_vis/public/components/vis/input_control_vis.tsx
@@ -101,11 +101,7 @@ export class InputControlVis extends Component<InputControlVisProps> {
       }
 
       return (
-        <EuiFlexItem
-          key={control.id}
-          style={{ minWidth: '250px' }}
-          data-test-subj="inputControlItem"
-        >
+        <EuiFlexItem key={control.id} css={{ minWidth: '250px' }} data-test-subj="inputControlItem">
           {controlComponent}
         </EuiFlexItem>
       );
diff --git a/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/__snapshots__/cluster_view.test.tsx.snap b/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/__snapshots__/cluster_view.test.tsx.snap
index e063ccea48cc2..42b8d1a99c1dc 100644
--- a/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/__snapshots__/cluster_view.test.tsx.snap
+++ b/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/__snapshots__/cluster_view.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`render partial should display callout when request timed out 1`] = `
 <EuiText
-  data-test-subj="inspectorRequestClustersDetails"
-  size="xs"
-  style={
+  css={
     Object {
       "width": "100%",
     }
   }
+  data-test-subj="inspectorRequestClustersDetails"
+  size="xs"
 >
   <EuiCallOut
     color="warning"
@@ -32,13 +32,13 @@ exports[`render partial should display callout when request timed out 1`] = `
 
 exports[`render partial should show view shard failure button when there are shard failures 1`] = `
 <EuiText
-  data-test-subj="inspectorRequestClustersDetails"
-  size="xs"
-  style={
+  css={
     Object {
       "width": "100%",
     }
   }
+  data-test-subj="inspectorRequestClustersDetails"
+  size="xs"
 >
   <ShardsView
     failures={
@@ -74,13 +74,13 @@ exports[`render partial should show view shard failure button when there are sha
 
 exports[`render should display success 1`] = `
 <EuiText
-  data-test-subj="inspectorRequestClustersDetails"
-  size="xs"
-  style={
+  css={
     Object {
       "width": "100%",
     }
   }
+  data-test-subj="inspectorRequestClustersDetails"
+  size="xs"
 >
   <ShardsView
     failures={Array []}
@@ -98,13 +98,13 @@ exports[`render should display success 1`] = `
 
 exports[`render skipped or failed should display callout when cluster is unavailable 1`] = `
 <EuiText
-  data-test-subj="inspectorRequestClustersDetails"
-  size="xs"
-  style={
+  css={
     Object {
       "width": "100%",
     }
   }
+  data-test-subj="inspectorRequestClustersDetails"
+  size="xs"
 >
   <EuiCallOut
     color="warning"
@@ -124,13 +124,13 @@ exports[`render skipped or failed should display callout when cluster is unavail
 
 exports[`render skipped or failed should display callout with view failed shards button when all shards fail 1`] = `
 <EuiText
-  data-test-subj="inspectorRequestClustersDetails"
-  size="xs"
-  style={
+  css={
     Object {
       "width": "100%",
     }
   }
+  data-test-subj="inspectorRequestClustersDetails"
+  size="xs"
 >
   <EuiCallOut
     color="warning"
diff --git a/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/cluster_view.tsx b/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/cluster_view.tsx
index 6818dc784eb55..c82097b12c547 100644
--- a/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/cluster_view.tsx
+++ b/src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_table/cluster_view.tsx
@@ -27,7 +27,7 @@ export function ClusterView({ clusterDetails }: Props) {
   });
 
   return (
-    <EuiText style={{ width: '100%' }} size="xs" data-test-subj="inspectorRequestClustersDetails">
+    <EuiText css={{ width: '100%' }} size="xs" data-test-subj="inspectorRequestClustersDetails">
       {clusterDetails.timed_out ? (
         <EuiCallOut
           size="s"
diff --git a/src/plugins/interactive_setup/public/cluster_configuration_form.tsx b/src/plugins/interactive_setup/public/cluster_configuration_form.tsx
index 6ebd2e8eb1f30..bdeff4fb930b4 100644
--- a/src/plugins/interactive_setup/public/cluster_configuration_form.tsx
+++ b/src/plugins/interactive_setup/public/cluster_configuration_form.tsx
@@ -171,7 +171,7 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
             defaultMessage="Connect to"
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ overflow: 'hidden' }}>
+        <EuiFlexItem grow={false} css={{ overflow: 'hidden' }}>
           <TextTruncate>
             <strong>{host}</strong>
           </TextTruncate>
diff --git a/src/plugins/interactive_setup/public/enrollment_token_form.tsx b/src/plugins/interactive_setup/public/enrollment_token_form.tsx
index 65765291fb79a..3cfc7d3fe33a2 100644
--- a/src/plugins/interactive_setup/public/enrollment_token_form.tsx
+++ b/src/plugins/interactive_setup/public/enrollment_token_form.tsx
@@ -184,7 +184,7 @@ const EnrollmentTokenDetails: FunctionComponent<EnrollmentTokenDetailsProps> = (
           defaultMessage="Connect to"
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ overflow: 'hidden' }}>
+      <EuiFlexItem grow={false} css={{ overflow: 'hidden' }}>
         <TextTruncate>
           <strong>{token.adr[0]}</strong>
         </TextTruncate>
diff --git a/src/plugins/interactive_setup/public/single_chars_field.tsx b/src/plugins/interactive_setup/public/single_chars_field.tsx
index 27bb6ce3e60a0..13af3f1f7ba3f 100644
--- a/src/plugins/interactive_setup/public/single_chars_field.tsx
+++ b/src/plugins/interactive_setup/public/single_chars_field.tsx
@@ -73,13 +73,13 @@ export const SingleCharsField: FunctionComponent<SingleCharsFieldProps> = ({
         <EuiFlexItem
           key={`${i}separator`}
           grow={false}
-          style={{ width: parseInt(euiThemeVars.euiFormControlHeight, 10) / 8 }}
+          css={{ width: parseInt(euiThemeVars.euiFormControlHeight, 10) / 8 }}
         />
       );
     }
 
     children.push(
-      <EuiFlexItem key={i} grow={false} style={{ width: euiThemeVars.euiFormControlHeight }}>
+      <EuiFlexItem key={i} grow={false} css={{ width: euiThemeVars.euiFormControlHeight }}>
         <EuiFieldText
           inputRef={(el) => {
             inputRefs.current[i] = el;
@@ -125,7 +125,7 @@ export const SingleCharsField: FunctionComponent<SingleCharsFieldProps> = ({
           }}
           maxLength={1}
           isInvalid={isInvalid}
-          style={{ textAlign: 'center' }}
+          css={{ textAlign: 'center' }}
           aria-label={i18n.translate('interactiveSetup.singleCharsField.digitLabel', {
             defaultMessage: 'Digit {index}',
             values: { index: i + 1 },
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx
index 3631ae86e1ec3..228e6d5f8cb15 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx
@@ -23,7 +23,7 @@ export const ActionCards = ({ actionCards }: ActionCardsProps) => {
     </EuiFlexItem>
   ));
   return (
-    <EuiFlexGrid columns={2} style={{ justifyContent: 'space-around' }}>
+    <EuiFlexGrid columns={2} css={{ justifyContent: 'space-around' }}>
       {cards}
     </EuiFlexGrid>
   );
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
index 9782a4cf1da65..fdee5059e7876 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
@@ -27,8 +27,7 @@ exports[`ElasticAgentCard props button 1`] = `
     image={
       <EuiImage
         alt=""
-        size="fullWidth"
-        style={
+        css={
           Object {
             "background": "aliceblue",
             "height": 240,
@@ -36,6 +35,7 @@ exports[`ElasticAgentCard props button 1`] = `
             "width": "max(100%, 360px)",
           }
         }
+        size="fullWidth"
         url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
       />
     }
@@ -78,8 +78,7 @@ exports[`ElasticAgentCard props category 1`] = `
     image={
       <EuiImage
         alt=""
-        size="fullWidth"
-        style={
+        css={
           Object {
             "background": "aliceblue",
             "height": 240,
@@ -87,6 +86,7 @@ exports[`ElasticAgentCard props category 1`] = `
             "width": "max(100%, 360px)",
           }
         }
+        size="fullWidth"
         url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
       />
     }
@@ -129,8 +129,7 @@ exports[`ElasticAgentCard props href 1`] = `
     image={
       <EuiImage
         alt=""
-        size="fullWidth"
-        style={
+        css={
           Object {
             "background": "aliceblue",
             "height": 240,
@@ -138,6 +137,7 @@ exports[`ElasticAgentCard props href 1`] = `
             "width": "max(100%, 360px)",
           }
         }
+        size="fullWidth"
         url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
       />
     }
@@ -185,8 +185,7 @@ exports[`ElasticAgentCard props recommended 1`] = `
     image={
       <EuiImage
         alt=""
-        size="fullWidth"
-        style={
+        css={
           Object {
             "background": "aliceblue",
             "height": 240,
@@ -194,6 +193,7 @@ exports[`ElasticAgentCard props recommended 1`] = `
             "width": "max(100%, 360px)",
           }
         }
+        size="fullWidth"
         url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
       />
     }
@@ -236,8 +236,7 @@ exports[`ElasticAgentCard renders 1`] = `
     image={
       <EuiImage
         alt=""
-        size="fullWidth"
-        style={
+        css={
           Object {
             "background": "aliceblue",
             "height": 240,
@@ -245,6 +244,7 @@ exports[`ElasticAgentCard renders 1`] = `
             "width": "max(100%, 360px)",
           }
         }
+        size="fullWidth"
         url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
       />
     }
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
index c4849e814edd4..1c8169ac5a732 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
@@ -43,7 +43,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
   const image = (
     <EuiImage
       size="fullWidth"
-      style={{
+      css={{
         width: 'max(100%, 360px)',
         height: 240,
         objectFit: 'cover',
diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
index b29563713d365..7954a7f7dfc65 100644
--- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
+++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
@@ -393,7 +393,7 @@ export const PresentationPanelHoverActions = ({
         <EuiNotificationBadge
           data-test-subj={`embeddablePanelNotification-${notification.id}`}
           key={notification.id}
-          style={{ marginTop: euiThemeVars.euiSizeXS, marginRight: euiThemeVars.euiSizeXS }}
+          css={{ marginTop: euiThemeVars.euiSizeXS, marginRight: euiThemeVars.euiSizeXS }}
           onClick={() =>
             notification.execute({ embeddable: api, trigger: panelNotificationTrigger })
           }
diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx
index b48a4eca7ae1f..795fd6b566a9b 100644
--- a/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx
+++ b/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx
@@ -167,7 +167,7 @@ export const usePresentationPanelHeaderActions = <
         <EuiNotificationBadge
           data-test-subj={`embeddablePanelNotification-${notification.id}`}
           key={notification.id}
-          style={{ marginTop: euiThemeVars.euiSizeXS, marginRight: euiThemeVars.euiSizeXS }}
+          css={{ marginTop: euiThemeVars.euiSizeXS, marginRight: euiThemeVars.euiSizeXS }}
           onClick={() =>
             notification.execute({ embeddable: api, trigger: panelNotificationTrigger })
           }
diff --git a/src/plugins/presentation_util/public/components/labs/environment_switch.tsx b/src/plugins/presentation_util/public/components/labs/environment_switch.tsx
index 94e71fe432fc5..d8727b4e2dbae 100644
--- a/src/plugins/presentation_util/public/components/labs/environment_switch.tsx
+++ b/src/plugins/presentation_util/public/components/labs/environment_switch.tsx
@@ -44,13 +44,13 @@ export const EnvironmentSwitch = ({ env, isChecked, onChange, name }: Props) =>
   const canSet = env === 'kibana' ? canSetAdvancedSettings : true;
 
   return (
-    <EuiFlexItem grow={false} style={{ marginBottom: '.25rem' }}>
+    <EuiFlexItem grow={false} css={{ marginBottom: '.25rem' }}>
       <EuiFlexGroup gutterSize="xs" alignItems="flexEnd" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiSwitch
             disabled={!canSet}
             checked={isChecked}
-            style={{ marginTop: 1 }}
+            css={{ marginTop: 1 }}
             label={
               <EuiFlexItem grow={false}>
                 <EuiScreenReaderOnly>
@@ -63,7 +63,7 @@ export const EnvironmentSwitch = ({ env, isChecked, onChange, name }: Props) =>
             compressed
           />
         </EuiFlexItem>
-        <EuiFlexItem style={{ textAlign: 'right' }}>
+        <EuiFlexItem css={{ textAlign: 'right' }}>
           <EuiIconTip content={switchText[env].help} position="left" />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/src/plugins/presentation_util/public/components/labs/labs_beaker_button.tsx b/src/plugins/presentation_util/public/components/labs/labs_beaker_button.tsx
index 1d454050963d9..8da1fe97455a6 100644
--- a/src/plugins/presentation_util/public/components/labs/labs_beaker_button.tsx
+++ b/src/plugins/presentation_util/public/components/labs/labs_beaker_button.tsx
@@ -34,7 +34,7 @@ export const LabsBeakerButton = ({ solutions, ...props }: Props) => {
       <EuiButton {...props} onClick={onButtonClick} minWidth={0}>
         <EuiIcon type="beaker" />
         {overrideCount > 0 ? (
-          <EuiNotificationBadge color="subdued" style={{ marginLeft: 2 }}>
+          <EuiNotificationBadge color="subdued" css={{ marginLeft: 2 }}>
             {overrideCount}
           </EuiNotificationBadge>
         ) : null}
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
index 4e29f34dedb73..575f13b66b59a 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
@@ -326,7 +326,7 @@ export class FlyoutClass extends Component<
         ),
         render: (list: any[]) => {
           return (
-            <ul style={{ listStyle: 'none' }}>
+            <ul css={{ listStyle: 'none' }}>
               {take(list, 3).map((obj, key) => (
                 <li key={key}>{obj.title}</li>
               ))}
diff --git a/src/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx b/src/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
index db3a0b8845420..009016a63a906 100644
--- a/src/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
+++ b/src/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
@@ -187,7 +187,7 @@ const TriggerPicker: React.FC<TriggerPickerProps> = ({
           </EuiText>
         ),
       }}
-      style={{ maxWidth: `80%` }}
+      css={{ maxWidth: `80%` }}
     >
       {triggers.map((trigger) => (
         <React.Fragment key={trigger}>
diff --git a/src/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx b/src/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
index cfe7784ec99fd..7b48712ff7d64 100644
--- a/src/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
+++ b/src/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
@@ -263,7 +263,7 @@ export function Demo({
         getTriggerInfo={mockGetTriggerInfo}
         triggers={[VALUE_CLICK_TRIGGER, APPLY_FILTER_TRIGGER, SELECT_RANGE_TRIGGER]}
       />
-      <div style={{ marginTop: '44px' }} />
+      <div css={{ marginTop: '44px' }} />
       <hr />
       <div>Action Factory Id: {state.currentActionFactory?.id}</div>
       <div>Action Factory Config: {JSON.stringify(state.config)}</div>
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.tsx
index 1859067212cb9..17c9aa98aa6e1 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.tsx
@@ -81,7 +81,7 @@ export const DrilldownTable: React.FC<DrilldownTableProps> = ({
                 title={drilldown.error}
                 aria-label={drilldown.error}
                 data-test-subj={`drilldownError-${drilldown.id}`}
-                style={{ marginLeft: '4px' }} /* a bit of spacing from text */
+                css={{ marginLeft: '4px' }} /* a bit of spacing from text */
               />
             </EuiToolTip>
           )}
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_template_table/drilldown_template_table.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_template_table/drilldown_template_table.tsx
index c918dbdef215a..cb23fa2d576d8 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_template_table/drilldown_template_table.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_template_table/drilldown_template_table.tsx
@@ -58,8 +58,8 @@ export const DrilldownTemplateTable: React.FC<DrilldownTemplateTableProps> = ({
       name: txtNameColumnTitle,
       sortable: true,
       render: (omit, item: DrilldownTemplateTableItem) => (
-        <div style={{ display: 'block' }}>
-          <div style={{ display: 'block' }}>{item.name}</div>
+        <div css={{ display: 'block' }}>
+          <div css={{ display: 'block' }}>{item.name}</div>
           <EuiText size={'xs'} color={'subdued'}>
             {item.description}
           </EuiText>
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.tsx
index 246cf5d7362ba..23633a52be35d 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.tsx
@@ -45,7 +45,7 @@ export const FlyoutFrame: FC<PropsWithChildren<FlyoutFrameProps>> = ({
         <EuiFlexGroup alignItems="center" gutterSize={'s'} responsive={false}>
           {onBack && (
             <EuiFlexItem grow={false}>
-              <div style={{ marginLeft: '-8px', marginTop: '-4px' }}>
+              <div css={{ marginLeft: '-8px', marginTop: '-4px' }}>
                 <EuiButtonIcon
                   color="text"
                   onClick={onBack}
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/text_with_icon/text_with_icon.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/text_with_icon/text_with_icon.tsx
index 8d321dcedb005..d2a5e2b8ad9e4 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/text_with_icon/text_with_icon.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/text_with_icon/text_with_icon.tsx
@@ -47,7 +47,7 @@ export const TextWithIcon: FC<PropsWithChildren<TextWithIconProps>> = ({
         </EuiFlexItem>
       )}
       {!!children && (
-        <EuiFlexItem grow={false} style={{ flexWrap: 'wrap' }}>
+        <EuiFlexItem grow={false} css={{ flexWrap: 'wrap' }}>
           {tooltip ? (
             <EuiToolTip content={tooltip}>
               <EuiTextColor color={color}>{children}</EuiTextColor>
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.tsx
index 35bdcbe4d2c9f..1c4653b3e8630 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.tsx
@@ -74,7 +74,7 @@ export const TriggerPicker: React.FC<TriggerPickerProps> = ({
           </EuiText>
         ),
       }}
-      style={{ maxWidth: `80%` }}
+      css={{ maxWidth: `80%` }}
     >
       {items.map((trigger) => (
         <TriggerPickerItem
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
index fd9e78c37d981..58bea4ba6864b 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
@@ -137,7 +137,7 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfigProps>
         data-test-subj="urlDrilldownAdditionalOptions"
       >
         <EuiSpacer size={'s'} />
-        <EuiPanel color="subdued" borderRadius="none" hasShadow={false} style={{ border: 'none' }}>
+        <EuiPanel color="subdued" borderRadius="none" hasShadow={false} css={{ border: 'none' }}>
           <UrlDrilldownOptionsComponent
             options={{ ...DEFAULT_URL_DRILLDOWN_OPTIONS, ...config }}
             onOptionChange={(change) => {
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/variable_popover/index.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/variable_popover/index.tsx
index 656ff07623dc5..e308969881429 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/variable_popover/index.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/variable_popover/index.tsx
@@ -74,7 +74,7 @@ export const VariablePopover: React.FC<Props> = ({ variables, onSelect, variable
         }}
       >
         {(list, search) => (
-          <div style={{ width: 320 }}>
+          <div css={{ width: 320 }}>
             <EuiPopoverTitle>{search}</EuiPopoverTitle>
             {list}
             {variablesHelpLink && (
diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx
index 16976d43e58f9..632652100069d 100644
--- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx
+++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx
@@ -497,7 +497,7 @@ export const DocViewerTable = ({
       </EuiFlexItem>
 
       {rows.length === 0 ? (
-        <EuiSelectableMessage style={{ minHeight: 300 }}>
+        <EuiSelectableMessage css={{ minHeight: 300 }}>
           <p>
             <EuiI18n
               token="unifiedDocViewer.docViews.table.noFieldFound"
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
index cc602efa61422..425624c3e194d 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
@@ -280,7 +280,7 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
               <EuiFlexGroup
                 direction="rowReverse"
                 alignItems="center"
-                style={{ isolation: 'isolate' }}
+                css={{ isolation: 'isolate' }}
                 responsive={false}
               >
                 <EuiFlexItem grow={false}>
diff --git a/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx
index 19ba668092466..9c8e7b074149f 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx
@@ -388,7 +388,7 @@ function FilterItemComponent(props: FilterItemProps) {
       ) : (
         <EuiContextMenuPanel
           items={[
-            <div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }} key="filter-editor">
+            <div css={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }} key="filter-editor">
               <FilterEditor
                 filter={filter}
                 indexPatterns={indexPatterns}
diff --git a/src/plugins/unified_search/public/query_string_input/add_filter_popover.tsx b/src/plugins/unified_search/public/query_string_input/add_filter_popover.tsx
index f55ca11e18057..74219bc4544dc 100644
--- a/src/plugins/unified_search/public/query_string_input/add_filter_popover.tsx
+++ b/src/plugins/unified_search/public/query_string_input/add_filter_popover.tsx
@@ -8,6 +8,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
+import { css } from '@emotion/react';
 import {
   EuiFlexItem,
   EuiButtonIcon,
@@ -43,6 +44,11 @@ interface AddFilterPopoverProps extends WithCloseFilterEditorConfirmModalProps {
   suggestionsAbstraction?: SuggestionsAbstraction;
 }
 
+const customButtonStyles = css({
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+});
+
 const AddFilterPopoverComponent = React.memo(function AddFilterPopover({
   indexPatterns,
   filters,
@@ -69,7 +75,7 @@ const AddFilterPopoverComponent = React.memo(function AddFilterPopover({
         size="m"
         disabled={isDisabled}
         {...buttonProps}
-        style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+        css={[buttonProps?.css, customButtonStyles]}
       />
     </EuiToolTip>
   );
diff --git a/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx b/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx
index 319d3b0f49846..16ef016ff4006 100644
--- a/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx
+++ b/src/plugins/unified_search/public/query_string_input/filter_editor_wrapper.tsx
@@ -105,7 +105,7 @@ export const FilterEditorWrapper = React.memo(function FilterEditorWrapper({
   }
 
   return (
-    <div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }}>
+    <div css={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }}>
       {newFilter && (
         <FilterEditor
           mode="add"
diff --git a/src/plugins/unified_search/public/query_string_input/no_data_popover.tsx b/src/plugins/unified_search/public/query_string_input/no_data_popover.tsx
index 47c783699d684..f3c47a332cfe8 100644
--- a/src/plugins/unified_search/public/query_string_input/no_data_popover.tsx
+++ b/src/plugins/unified_search/public/query_string_input/no_data_popover.tsx
@@ -63,7 +63,7 @@ export function NoDataPopover({
       }}
       content={
         <EuiText size="s">
-          <p style={{ maxWidth: 300 }}>{strings.getNoDataPopoverContent()}</p>
+          <p css={{ maxWidth: 300 }}>{strings.getNoDataPopoverContent()}</p>
         </EuiText>
       }
       minWidth={300}
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx
index 4d4db4438d74d..037997bbd5c86 100644
--- a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx
+++ b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx
@@ -628,7 +628,7 @@ export const QueryBarTopRow = React.memo(
     function renderDataViewsPicker() {
       if (props.dataViewPickerComponentProps && !Boolean(isQueryLangSelected)) {
         return (
-          <EuiFlexItem style={{ maxWidth: '100%' }} grow={isMobile}>
+          <EuiFlexItem css={{ maxWidth: '100%' }} grow={isMobile}>
             <DataViewPicker
               {...props.dataViewPickerComponentProps}
               trigger={{ fullWidth: isMobile, ...props.dataViewPickerComponentProps.trigger }}
@@ -789,7 +789,7 @@ export const QueryBarTopRow = React.memo(
               )}
               <EuiFlexItem
                 grow={!shouldShowDatePickerAsBadge()}
-                style={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 320, maxWidth: '100%' }}
+                css={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 320, maxWidth: '100%' }}
               >
                 {!isQueryLangSelected ? renderQueryInput() : null}
               </EuiFlexItem>
diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
index 2e3b0fab0a161..2e76341ae6071 100644
--- a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
+++ b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx
@@ -808,7 +808,7 @@ export default class QueryStringInputUI extends PureComponent<QueryStringInputPr
         <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
           <div
             {...ariaCombobox}
-            style={{
+            css={{
               position: 'relative',
               width: '100%',
               zIndex: euiThemeVars.euiZLevel1,
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx b/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx
index ff0b48a1de7aa..b83a3330cce2f 100644
--- a/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx
+++ b/src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx
@@ -116,7 +116,7 @@ export function LinkedSearch({ savedSearch, eventEmitter }: LinkedSearchProps) {
               defaultMessage="Linked to saved search"
             />
           </EuiPopoverTitle>
-          <div style={{ width: 260 }}>
+          <div css={{ width: 260 }}>
             <EuiText size="s">
               <p>
                 <EuiButtonEmpty
diff --git a/src/plugins/vis_default_editor/public/default_editor_controller.tsx b/src/plugins/vis_default_editor/public/default_editor_controller.tsx
index 46034ab7b252a..5b141282b9a1e 100644
--- a/src/plugins/vis_default_editor/public/default_editor_controller.tsx
+++ b/src/plugins/vis_default_editor/public/default_editor_controller.tsx
@@ -35,7 +35,7 @@ class DefaultEditorController implements IEditorController {
           <Suspense
             fallback={
               <div
-                style={{
+                css={{
                   display: 'flex',
                   flex: '1 1 auto',
                   justifyContent: 'center',
diff --git a/src/plugins/vis_types/timeseries/public/application/components/aggs/agg_row.tsx b/src/plugins/vis_types/timeseries/public/application/components/aggs/agg_row.tsx
index 1a533c5fdd7e0..fd41e4996ff03 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/aggs/agg_row.tsx
+++ b/src/plugins/vis_types/timeseries/public/application/components/aggs/agg_row.tsx
@@ -48,7 +48,7 @@ export function AggRow(props: AggRowProps) {
         responsive={false}
       >
         <EuiFlexItem grow={false}>
-          <EuiIcon type={iconType} color={iconColor} style={{ marginTop: euiTheme.size.xs }} />
+          <EuiIcon type={iconType} color={iconColor} css={{ marginTop: euiTheme.size.xs }} />
         </EuiFlexItem>
         <EuiFlexItem css={aggRowChildrenStyles(euiTheme)}>{props.children}</EuiFlexItem>
 
diff --git a/src/plugins/vis_types/timeseries/public/application/components/aggs/percentile_ui.js b/src/plugins/vis_types/timeseries/public/application/components/aggs/percentile_ui.js
index f30dfce37e5c6..7a93aa271b5d5 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/aggs/percentile_ui.js
+++ b/src/plugins/vis_types/timeseries/public/application/components/aggs/percentile_ui.js
@@ -122,7 +122,7 @@ export class Percentiles extends Component {
                 {/* If the series is grouped by, then these colors are not respected,
                  no need to display the color picker */}
                 {!isGroupedBy && !['table', 'metric', 'markdown'].includes(panel.type) && (
-                  <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+                  <EuiFlexItem grow={false} css={{ justifyContent: 'center' }}>
                     <ColorPicker
                       disableTrash={true}
                       onChange={this.handleColorChange(model)}
diff --git a/src/plugins/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx b/src/plugins/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx
index b7da6298bc7dd..16f2476485391 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx
+++ b/src/plugins/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx
@@ -89,12 +89,9 @@ export const SwitchModePopover = ({ onModeChange, useKibanaIndices }: PopoverPro
       }
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      style={{ height: 'auto' }}
+      css={{ height: 'auto' }}
     >
-      <div
-        style={{ width: '360px' }}
-        data-test-subj="switchIndexPatternSelectionModePopoverContent"
-      >
+      <div css={{ width: '360px' }} data-test-subj="switchIndexPatternSelectionModePopoverContent">
         <EuiPopoverTitle>
           {i18n.translate('visTypeTimeseries.indexPatternSelect.switchModePopover.title', {
             defaultMessage: 'Data view mode',
diff --git a/src/plugins/visualizations/public/components/visualization_missed_saved_object_error.tsx b/src/plugins/visualizations/public/components/visualization_missed_saved_object_error.tsx
index d4124ca216d04..e0be21c3272e4 100644
--- a/src/plugins/visualizations/public/components/visualization_missed_saved_object_error.tsx
+++ b/src/plugins/visualizations/public/components/visualization_missed_saved_object_error.tsx
@@ -49,7 +49,7 @@ export const VisualizationMissedSavedObjectError = ({
                 path: '/kibana/indexPatterns/create',
               })}
               data-test-subj="configuration-failure-reconfigure-indexpatterns"
-              style={{ width: '100%' }}
+              css={{ width: '100%' }}
             >
               {i18n.translate('visualizations.missedDataView.dataViewReconfigure', {
                 defaultMessage: `Recreate it in the data view management page`,
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx
index 4993c0168313a..71338e96ea145 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx
@@ -472,7 +472,7 @@ export const getVisualizeEmbeddableFactory: (deps: {
 
         return (
           <div
-            style={{ width: '100%', height: '100%' }}
+            css={{ width: '100%', height: '100%' }}
             ref={domNode}
             data-test-subj="visualizationLoader"
             data-rendering-count={renderCount /* Used for functional tests */}
@@ -482,7 +482,7 @@ export const getVisualizeEmbeddableFactory: (deps: {
             data-shared-item
           >
             {/* Replicate the loading state for the expression renderer to avoid FOUC  */}
-            <EuiFlexGroup style={{ height: '100%' }} justifyContent="center" alignItems="center">
+            <EuiFlexGroup css={{ height: '100%' }} justifyContent="center" alignItems="center">
               {isLoading && <EuiLoadingChart size="l" mono />}
               {!isLoading && error && (
                 <EuiEmptyPrompt