How to use this library with react-frame-component (iframe)?

[doougui]

I'm creating a Chrome extension and, to separate the styles of the page I am applying my app as a content script from my styles, I am using an iframe component by using the react-frame-component library. When I installed react-select, I noticed that the emotion styles are being applied at the root head

This way, the only thing I get when I try to use the Select component from react-select, is something like this:

I know that styled-components has a StyleSheetManager component that I can use to pass my styles to my iframe:

Is there any possible way I could do this with emotion?

Related: #3120

[Rall3n]

Hello @doougui,

react-select uses emotion as a CSS-in-JS styling library.

This library exposes API to create a cache with which you can configure the insertion point of the generated stylesheets.

import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import Frame, { useFrame } from 'react-frame-component';

const FrameStyleCache = ({ children }) => {
  const { document, window } = useFrame();

  const cache = useMemo(() => createCache({
    key: 'frame-cache',
    container: document.head
  }), [ document ]);

  return <CacheProvider value={cache}>{children}</CacheProvider>
};

const App = () => {
 return <Frame>
    <FrameStyleCache>
      <Main />
    </FrameStyleCache>
  </Frame>;
};

Disclaimer: Above code should theoretically word, but is untested.

[doougui]

Thank you 🙏🏼. This worked like a charm.

For anyone interested, the final code looks like this:

import React from 'react';
import { Main } from 'Main';
import Frame, { FrameContextConsumer, useFrame } from 'react-frame-component';
import { StyleSheetManager } from 'styled-components';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const frameStyle = {
  width: '100%',
  height: '100%',
  border: 'none',
};

const FrameStyleCache = ({ children }: { children: React.ReactNode }) => {
  const { document } = useFrame();

  const cache = React.useMemo(
    () =>
      createCache({
        key: 'frame-cache',
        container: document?.head,
      }),
    [document],
  );

  return <CacheProvider value={cache}>{children}</CacheProvider>;
};

export function App() {
  return (
    <>
      <Frame style={frameStyle}>
        <FrameContextConsumer>
          {(frameContext) => (
            <StyleSheetManager target={frameContext.document?.head}>
              <FrameStyleCache>
                <Main />
              </FrameStyleCache>
            </StyleSheetManager>
          )}
        </FrameContextConsumer>
      </Frame>
      <ToastContainer theme="colored" />
    </>
  );
}