How to use @emotion/cache - 10 common examples

// @flow
import * as React from 'react'
import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

let cache = createCache()

export default (props: { children: React.Node }) => {
  return {props.children}
}

) => {
          return func(props, cache, ref)
        }}
      
    )
  }
  // $FlowFixMe
  return React.forwardRef(render)
}

if (!isBrowser) {
  class BasicProvider extends React.Component<
    { children: EmotionCache => React.Node },
    { value: EmotionCache }
  > {
    state = { value: createCache() }
    render() {
      return (
        
          {this.props.children(this.state.value)}
        
      )
    }
  }

  withEmotionCache = function withEmotionCache(
    func: (props: Props, cache: EmotionCache) => React.Node
  ): React.StatelessFunctionalComponent {
    return (props: Props) => (
      
        {context => {
          if (context === null) {

test('emotion plugins - @styled-system/css', () => {
  let cache = createCache({
    emotionPlugins: [styledSystemCss]
  })

  expect(
    render(
      
        <div></div>

opts => {
    let cache = createCache()
    if (opts.cache) {
      cache = opts.cache()
    }
    let { renderStylesToString } = createEmotionServer(cache)
    expect(
      renderStylesToString(
        renderToString(
          {opts.render()}
        )
      )
    ).toMatchSnapshot()
  },
  cases

opts => {
    safeQuerySelector('head').innerHTML = ''
    let cache = createCache()
    expect(
      renderer
        .create({opts.render()})
        .toJSON()
    ).toMatchSnapshot()
    expect(
      throwIfFalsy(cache.sheet.tags).map(tag => tag.textContent || '')
    ).toMatchSnapshot()
    cache.sheet.flush()
  },
  {

beforeCreate() {
      this.$emotionCache = (this.$parent && this.$parent.$emotionCache) || createCache()
      this.$emotionCache.compat = true
    }
  })

export const getCache = () => {
  if (IS_BROWSER) {
    cache = cache || createCache()
    return cache
  }

  return createCache()
}

consumer = (context: CSSContextType | null) => {
    if (this.props.cache !== undefined) {
      context = this.props.cache
    }
    let newContext = context
    if (context === null) {
      if (this.emotionCache === undefined) {
        newContext = createCache()
        if (this.props.theme) {
          newContext.theme = getTheme(this.props.theme, undefined)
        }
      } else if (
        this.props.theme &&
        this.props.theme !== this.emotionCache.theme
      ) {
        newContext = {
          ...this.emotionCache,
          theme: getTheme(this.props.theme, undefined)
        }
      }
    } else if (this.props.theme && this.props.theme !== context.theme) {
      newContext = {
        ...context,
        theme: getTheme(this.props.theme, context.theme)

beforeCreate() {
      this.$emotionCache = this.$parent && this.$parent.$emotionCache || createCache()
      this.$emotionCache.compat = true
    }
  })

import React from 'react';
import ReactDOM from 'react-dom';
import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';
import LZString from 'lz-string';
import URLSafeBase64 from 'urlsafe-base64';
import Page from '__REACT_SSR_PAGE__';

const getProps = () => {
  const compressedProps = document.getElementById('react-ssr-script').dataset.props;
  const decoded = URLSafeBase64.decode(compressedProps);
  const decompressed = LZString.decompressFromUint8Array(decoded);
  return JSON.parse(decompressed);
}

const cache = createCache();

ReactDOM.render(
  
    
  ,
  document.getElementById('react-ssr-root'),
);

if (module.hot) {
  module.hot.accept();
}