diff --git a/package-lock.json b/package-lock.json
index 93558fe17b5188..7fa6f8066ad227 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13258,6 +13258,7 @@
 			"version": "file:packages/components",
 			"requires": {
 				"@babel/runtime": "^7.13.10",
+				"@emotion/cache": "^10.0.27",
 				"@emotion/core": "^10.1.1",
 				"@emotion/css": "^10.0.22",
 				"@emotion/hash": "^0.8.0",
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index dc581352c1c50c..40e677aedd2283 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -9,6 +9,7 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
@@ -182,7 +183,13 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 			title={ __( 'Editor canvas' ) }
 			name="editor-canvas"
 		>
-			{ iframeDocument && createPortal( children, iframeDocument.body ) }
+			{ iframeDocument &&
+				createPortal(
+					<StyleProvider iframeDocument={ iframeDocument }>
+						{ children }
+					</StyleProvider>,
+					iframeDocument.body
+				) }
 			{ iframeDocument && createPortal( head, iframeDocument.head ) }
 		</iframe>
 	);
diff --git a/packages/components/package.json b/packages/components/package.json
index eeb1985a8c435a..06c3c8d28a14f7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -27,6 +27,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
+		"@emotion/cache": "^10.0.27",
 		"@emotion/core": "^10.1.1",
 		"@emotion/css": "^10.0.22",
 		"@emotion/hash": "^0.8.0",
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index d89ec5a389aed5..89fce1acb4f836 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -132,6 +132,7 @@ export {
 	Provider as SlotFillProvider,
 	useSlot as __experimentalUseSlot,
 } from './slot-fill';
+export { default as __experimentalStyleProvider } from './style-provider';
 
 // Higher-Order Components
 export {
diff --git a/packages/components/src/style-provider/index.js b/packages/components/src/style-provider/index.js
new file mode 100644
index 00000000000000..0f57ce8945edb1
--- /dev/null
+++ b/packages/components/src/style-provider/index.js
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
+import memoize from 'memize';
+
+const memoizedCreateCacheWithContainer = memoize( ( container ) => {
+	return createCache( { container } );
+} );
+
+export default function StyleProvider( { children, iframeDocument } ) {
+	if ( ! iframeDocument ) {
+		return null;
+	}
+
+	const cache = memoizedCreateCacheWithContainer( iframeDocument.head );
+
+	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
+}