Custom CacheProvider

Style container

You may come across a situation where you want to inject the generated styles into a different element than the current document head (an iframe perhaps).

By using the CacheProvider from @emotion/react and createCache from @emotion/cache you can specify the target container element.

import { ThemeUIProvider } from 'theme-ui'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'

/**
 * @see https://emotion.sh/docs/@emotion/cache
 */
const cache = createCache({
  container: document.getElementById('my-cool-iframe'),
})

const theme = {
  colors: {
    text: 'tomato',
  },
}

export default ({ children }) => {
  return (
    <CacheProvider value={cache}>
      <ThemeUIProvider theme={theme}>{children}</ThemeUIProvider>
    </CacheProvider>
  )
}

With react-frame-component

import { ThemeUIProvider } from 'theme-ui'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import Iframe, { FrameContextConsumer } from 'react-frame-component'

const theme = {
  colors: {
    text: 'tomato',
  },
}

export default ({ children }) => {
  return (
    <Iframe initialContent="IFRAME_CONTENT">
      <FrameContextConsumer>
        {(frameContext) => {
          const cache = createCache({
            container: frameContext.document.head,
          })
          return (
            <CacheProvider value={cache}>
              <ThemeUIProvider theme={theme}>{children}</ThemeUIProvider>
            </CacheProvider>
          )
        }}
      </FrameContextConsumer>
    </Iframe>
  )
}