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./
2025-04-23 01:13:23 -04:00 · 2024-12-02 14:16:23 +01:00 · 2024-12-02 14:16:23 +01:00 · 6aaecd0d8f
commit 6aaecd0d8f
parent f21fdaf563
91 changed files with 196 additions and 198 deletions
--- 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>
 `;
-
--- 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',
--- 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;
--- 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',
--- 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',
--- 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,
        }}
      >
--- 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
--- 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:
--- 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)' }}
--- 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) => (
--- 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 && (
--- 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"
--- 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>
--- 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>
--- 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"
--- 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>
--- 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,
--- 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
--- 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"
--- 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>
--- 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('')}
--- 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"
--- 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 (
--- 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 
--- 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"
--- 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,
--- 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>
--- 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>
      ) : (
--- 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}
--- 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>
--- 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 ? (
--- 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"
--- 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
--- 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>}

--- 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>
  );
 };
-```
+```
--- 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.

--- 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 />
--- 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',
                          },
                        },
--- 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',
                          },
                        },
--- 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" />
--- 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>
                ),
--- 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];
--- 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>
      )}
--- 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>
      )}
--- 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>
  );
--- 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} />
--- 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>
--- 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}`}
        >
--- 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",
        }
--- 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()}
--- 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"
--- 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"
--- 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={
--- 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>
      );
--- 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"
--- 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"
--- 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>
--- 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>
--- 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 },
--- 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>
  );
--- 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"
      />
    }
--- 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',
--- 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 })
          }
--- 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 })
          }
--- 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>
--- 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}
--- 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>
              ))}
--- 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}>
--- 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>
--- 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>
          )}
--- 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>
--- 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}
--- 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>
--- 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
--- 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) => {
--- 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 && (
--- 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"
--- 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}>
--- 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}
--- 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>
  );
--- 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"
--- 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}
--- 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>
--- 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,
--- 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
--- 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',
--- 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>

--- 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)}
--- 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',
--- 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`,
--- 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