# give/4.18.0/src/Admin/providers/EmotionStylesProvider/index.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 65 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Admin/providers/EmotionStylesProvider/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Admin/providers/EmotionStylesProvider/index.tsx
- Modified: 2025-12-08T20:09:52+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Admin/providers/EmotionStylesProvider/index.tsx#L10-L20`.

```tsx
import {useMemo, useRef, useState, useEffect, ReactNode} from 'react';
import {CacheProvider} from '@emotion/react';
import createCache from '@emotion/cache';

/**
 * Custom Cache Provider for react-select in WordPress 6.9+ Iframe Context
 *
 * In WordPress 6.9+, block editor content renders inside an iframe.
 * This component provides an Emotion cache configured to inject styles
 * into the correct document (the iframe's head instead of the parent's).
 *
 * This is similar to react-select's NonceProvider but adds the crucial
 * `container` option to target the iframe's document.
 */

/**
 * @since 4.13.2
 */
type EmotionStylesProviderProps = {
    children: ReactNode;
    cacheKey?: string;
};

/**
 * Provides an Emotion cache that injects styles into the current document.
 * This is essential for WordPress 6.9+ where blocks render in an iframe.
 * @since 4.13.2
 */
export default function EmotionStylesProvider({children, cacheKey = 'givewp'}: EmotionStylesProviderProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const [container, setContainer] = useState<HTMLElement | null>(null);

    // Get the correct document head after mount
    useEffect(() => {
        if (containerRef.current) {
            setContainer(containerRef.current.ownerDocument.head);
        }
    }, []);

    // Create cache with the container option to target the correct document
    const emotionCache = useMemo(() => {
        if (!container) {
            return null;
        }
        return createCache({
            key: cacheKey,
            container: container,
        });
    }, [cacheKey, container]);

    // Render a wrapper div to get the document reference
    // Use display:contents so it doesn't affect layout
    // IMPORTANT: Don't render children until cache is ready to ensure
    // Emotion styles are injected into the correct document from the start
    return (
        <div ref={containerRef} style={{display: 'contents'}}>
            {emotionCache && (
                <CacheProvider value={emotionCache}>
                    {children}
                </CacheProvider>
            )}
        </div>
    );
}

```