diff --git a/package.json b/package.json
index bc8b99890b9da..20b513f2707a2 100644
--- a/package.json
+++ b/package.json
@@ -503,7 +503,6 @@
     "source-map-support": "^0.5.19",
     "stats-lite": "^2.2.0",
     "strip-ansi": "^6.0.0",
-    "style-it": "^2.1.3",
     "styled-components": "^5.1.0",
     "suricata-sid-db": "^1.0.2",
     "symbol-observable": "^1.2.0",
diff --git a/x-pack/plugins/canvas/public/components/element_content/element_content.tsx b/x-pack/plugins/canvas/public/components/element_content/element_content.tsx
index 0a9e935aa2320..147c7c05ecf12 100644
--- a/x-pack/plugins/canvas/public/components/element_content/element_content.tsx
+++ b/x-pack/plugins/canvas/public/components/element_content/element_content.tsx
@@ -7,8 +7,7 @@
 
 import React from 'react';
 import { omitBy, isNil } from 'lodash';
-// @ts-expect-error Untyped library
-import Style from 'style-it';
+import { css } from '@emotion/react';
 
 import { ExpressionRenderer } from '@kbn/expressions-plugin';
 import { getType } from '@kbn/interpreter';
@@ -56,9 +55,9 @@ export const ElementContent = (props: Props) => {
 
   const containerStyle = omitBy(renderable.containerStyle, isNil);
 
-  return Style.it(
-    renderable.css,
+  return (
     <div
+      css={css(renderable.css)}
       // TODO: 'canvas__element' was added for BWC, It can be removed after a while
       className={'canvas__element canvasElement'}
       style={{ ...containerStyle, width, height }}
@@ -74,7 +73,6 @@ export const ElementContent = (props: Props) => {
           renderFn={renderFunction.render}
           reuseNode={renderFunction.reuseDomNode}
           config={renderable.value}
-          css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
           width={width}
           height={height}
           handlers={handlers}
diff --git a/x-pack/plugins/canvas/public/components/export_app/export_app.component.tsx b/x-pack/plugins/canvas/public/components/export_app/export_app.component.tsx
index c3facb9268961..5b70d5703b50e 100644
--- a/x-pack/plugins/canvas/public/components/export_app/export_app.component.tsx
+++ b/x-pack/plugins/canvas/public/components/export_app/export_app.component.tsx
@@ -7,8 +7,7 @@
 
 import React, { FC, useEffect } from 'react';
 import PropTypes from 'prop-types';
-// @ts-expect-error untyped library
-import Style from 'style-it';
+import { css } from '@emotion/react';
 // @ts-expect-error untyped local
 import { WorkpadPage } from '../workpad_page';
 import { RoutingLink } from '../routing';
@@ -33,9 +32,12 @@ export const ExportApp: FC<Props> = ({ workpad, selectedPageIndex, initializeWor
         <div className="canvasLayout__stageHeader">
           <RoutingLink to={`/workpad/${id}`}>Edit Workpad</RoutingLink>
         </div>
-        {Style.it(
-          workpad.css,
-          <div className="canvasExport__stageContent" data-shared-items-count={pageElementCount}>
+        {
+          <div
+            css={css(workpad.css)}
+            className="canvasExport__stageContent"
+            data-shared-items-count={pageElementCount}
+          >
             <WorkpadPage
               isSelected
               key={activePage.id}
@@ -46,7 +48,7 @@ export const ExportApp: FC<Props> = ({ workpad, selectedPageIndex, initializeWor
               unregisterLayout={() => {}}
             />
           </div>
-        )}
+        }
       </div>
     </div>
   );
diff --git a/x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx b/x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx
index 8d9ea9e8b4185..c4b4db35c2d31 100644
--- a/x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx
+++ b/x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx
@@ -10,10 +10,6 @@ import { mount } from 'enzyme';
 import { ExportApp } from './export_app.component';
 import { CanvasWorkpad } from '../../../types';
 
-jest.mock('style-it', () => ({
-  it: (css: string, Component: any) => Component,
-}));
-
 jest.mock('../workpad_page', () => ({
   WorkpadPage: (props: any) => <div>Page</div>,
 }));
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
index 7743d508842ad..3522edf9d176c 100644
--- a/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
+++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
@@ -20,8 +20,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-// @ts-expect-error untyped dependency
-import Style from 'style-it';
 import { ConfirmModal } from '../confirm_modal';
 import { RoutingLink } from '../routing';
 import { WorkpadRoutingContext } from '../../routes/workpad';
@@ -178,7 +176,7 @@ export class PageManager extends Component<Props, State> {
   };
 
   renderPage = (page: CanvasPage, i: number) => {
-    const { isWriteable, selectedPage, workpadCSS } = this.props;
+    const { isWriteable, selectedPage } = this.props;
     const pageNumber = i + 1;
 
     return (
@@ -201,12 +199,9 @@ export class PageManager extends Component<Props, State> {
             <WorkpadRoutingContext.Consumer>
               {({ getUrl }) => (
                 <RoutingLink to={getUrl(pageNumber)}>
-                  {Style.it(
-                    workpadCSS,
-                    <div>
-                      <PagePreview height={100} page={page} onRemove={this.onConfirmRemove} />
-                    </div>
-                  )}
+                  <div>
+                    <PagePreview height={100} page={page} onRemove={this.onConfirmRemove} />
+                  </div>
                 </RoutingLink>
               )}
             </WorkpadRoutingContext.Consumer>
diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.component.tsx b/x-pack/plugins/canvas/public/components/workpad/workpad.component.tsx
index 740f71eab085a..0d403ec960c80 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.component.tsx
@@ -6,8 +6,7 @@
  */
 
 import React, { FC } from 'react';
-// @ts-expect-error
-import Style from 'style-it';
+import { css } from '@emotion/react';
 // @ts-expect-error
 import { WorkpadPage } from '../workpad_page';
 import { Fullscreen } from '../fullscreen';
@@ -125,9 +124,9 @@ export const Workpad: FC<Props> = ({
               : {};
 
             // NOTE: the data-shared-* attributes here are used for reporting
-            return Style.it(
-              workpadCss || DEFAULT_WORKPAD_CSS,
+            return (
               <div
+                css={css(workpadCss || DEFAULT_WORKPAD_CSS)}
                 className={`canvasWorkpad ${isFullscreenProp ? 'fullscreen' : ''}`}
                 style={fsStyle}
                 data-shared-items-count={totalElementCount}
diff --git a/x-pack/plugins/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap
index 5fabff58521fa..fd505ff44c177 100644
--- a/x-pack/plugins/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap
@@ -36,7 +36,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
               class="root"
             >
               <div
-                class="container s2042575598"
+                class="container"
+                css="css-159kt7d"
                 style="overflow: hidden;"
               >
                 <div
@@ -92,7 +93,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
                     class="root"
                   >
                     <div
-                      class="container s2042575598"
+                      class="container"
+                      css="css-159kt7d"
                       style="overflow: hidden;"
                     >
                       <div
@@ -308,7 +310,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
               class="root"
             >
               <div
-                class="container s2042575598"
+                class="container"
+                css="css-159kt7d"
                 style="overflow: hidden;"
               >
                 <div
@@ -364,7 +367,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
                     class="root"
                   >
                     <div
-                      class="container s2042575598"
+                      class="container"
+                      css="css-159kt7d"
                       style="overflow: hidden;"
                     >
                       <div
@@ -580,7 +584,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
               class="root"
             >
               <div
-                class="container s2042575598"
+                class="container"
+                css="css-159kt7d"
                 style="overflow: hidden;"
               >
                 <div
@@ -636,7 +641,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
                     class="root"
                   >
                     <div
-                      class="container s2042575598"
+                      class="container"
+                      css="css-159kt7d"
                       style="overflow: hidden;"
                     >
                       <div
@@ -853,7 +859,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
               class="root"
             >
               <div
-                class="container s2042575598"
+                class="container"
+                css="css-159kt7d"
                 style="overflow: hidden;"
               >
                 <div
@@ -909,7 +916,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
                     class="root"
                   >
                     <div
-                      class="container s2042575598"
+                      class="container"
+                      css="css-159kt7d"
                       style="overflow: hidden;"
                     >
                       <div
@@ -1125,7 +1133,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
               class="root"
             >
               <div
-                class="container s2042575598"
+                class="container"
+                css="css-159kt7d"
                 style="overflow: hidden;"
               >
                 <div
@@ -1181,7 +1190,8 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
                     class="root"
                   >
                     <div
-                      class="container s2042575598"
+                      class="container"
+                      css="css-159kt7d"
                       style="overflow: hidden;"
                     >
                       <div
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx b/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx
index 2488aaac9c2e8..b7721636037cb 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx
+++ b/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx
@@ -6,8 +6,7 @@
  */
 
 import React, { FC, PureComponent } from 'react';
-// @ts-expect-error untyped library
-import Style from 'style-it';
+import { css as emotionCss } from '@emotion/css';
 import { AnyExpressionFunctionDefinition } from '@kbn/expressions-plugin';
 import { Positionable } from '../../public/components/positionable/positionable';
 import { elementToShape } from '../../public/components/workpad_page/positioning_utils';
@@ -81,16 +80,13 @@ export class RenderedElementComponent extends PureComponent<Props> {
     return (
       <Positionable height={height} width={width} transformMatrix={shape.transformMatrix}>
         <div className={css.root}>
-          {Style.it(
-            elementCSS,
-            <div className={css.container} style={{ ...containerStyle }}>
-              <div className={css.content}>
-                <div className={css.renderContainer}>
-                  <div key={id} ref={this.ref} data-renderer={as} className={css.render} />
-                </div>
+          <div css={emotionCss(elementCSS)} className={css.container} style={{ ...containerStyle }}>
+            <div className={css.content}>
+              <div className={css.renderContainer}>
+                <div key={id} ref={this.ref} data-renderer={as} className={css.render} />
               </div>
             </div>
-          )}
+          </div>
         </div>
       </Positionable>
     );
diff --git a/yarn.lock b/yarn.lock
index df337d3c6f61e..6f0b97317e0cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11851,7 +11851,7 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.9:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
   integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
 
-core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2, core-js@^3.8.3, core-js@^3.23.5:
+core-js@^3.0.4, core-js@^3.23.5, core-js@^3.6.5, core-js@^3.8.2, core-js@^3.8.3:
   version "3.23.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.5.tgz#1f82b0de5eece800827a2f59d597509c67650475"
   integrity sha512-7Vh11tujtAZy82da4duVreQysIoO2EvVrur7y6IzZkH1IHPSekuDi8Vuw1+YKjkbfWLRD7Nc9ICQ/sIUDutcyg==
@@ -24543,11 +24543,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
-react-lib-adler32@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/react-lib-adler32/-/react-lib-adler32-1.0.3.tgz#63df1aed274eabcc1c5067077ea281ec30888ba7"
-  integrity sha512-AqFqdt4cP0RPffHNjVHZ7tyIgnoSzNxgFhG8XKMXCtA1dZ72gTPO4iYFwWDKHqvE8sHS14rhltQTdbXU5G4BFA==
-
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -27541,13 +27536,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-style-it@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/style-it/-/style-it-2.1.3.tgz#ab6b5e109a1e946d58639f8cd05aa52df7ef1ab1"
-  integrity sha512-QVpYgFoJXhxiuBEok05YTx0WB4AbGkIiMWuCEPLTjFf3tCeB15eqhqMOjJeIsXqZ8REvgsqVuL2u7eoYg0mXJw==
-  dependencies:
-    react-lib-adler32 "^1.0.3"
-
 style-loader@^1.1.3, style-loader@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"