Skip to content
Theme UI
GitHub

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 { ThemeProvider } 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}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</CacheProvider>
)
}

With react-frame-component

import { ThemeProvider } 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}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</CacheProvider>
)
}}
</FrameContextConsumer>
</Iframe>
)
}
Edit the page on GitHub
Previous:
Nested ThemeProviders
Next:
Syntax Highlighting