Popover: Fix the styles for components that use emotion within popove…

…rs (#54912) # Conflicts: # packages/components/CHANGELOG.md
WordPress · Sep 29, 2023 · ccf7656 · ccf7656
1 parent 458a73d
commit ccf7656
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).
 -   `DateTimePicker`: fix onChange callback check so that it also works inside iframes ([#54669](https://github.com/WordPress/gutenberg/pull/54669)).
+-   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
 
 ### Internal
 

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -60,6 +60,7 @@ import type {
 	PopoverAnchorRefTopBottom,
 } from './types';
 import { overlayMiddlewares } from './overlay-middlewares';
+import { StyleProvider } from '../style-provider';
 
 /**
  * Name of slot in which popover should fill.
@@ -447,7 +448,10 @@ const UnforwardedPopover = (
 	if ( shouldRenderWithinSlot ) {
 		content = <Fill name={ slotName }>{ content }</Fill>;
 	} else if ( ! inline ) {
-		content = createPortal( content, getPopoverFallbackContainer() );
+		content = createPortal(
+			<StyleProvider document={ document }>{ content }</StyleProvider>,
+			getPopoverFallbackContainer()
+		);
 	}
 
 	if ( hasAnchor ) {