CacheProvider

✏️ Edit this page

It can be useful to customize emotion’s options - i.e. to add custom Stylis plugins, customize prefix of inserted class names, render style tags into specific element and more. You can look up full list of options here.

/** @jsx jsx */
import { CacheProvider, jsx, css } from '@emotion/core'
import createCache from '@emotion/cache'

const myCache = createCache({
  key: 'my-prefix-key',
  stylisPlugins: [
    /* your plugins here */
  ],
  // prefix based on the css property
  prefix: key => {
    switch (key) {
      case 'flex':
        return false
      case 'transform':
      default:
        return true
    }
  }
})

render(
  <CacheProvider value={myCache}>
    <div
      css={css`
        display: flex;
      `}
    >
      <div
        css={css`
          flex: 1;
          transform: scale(1.1);
          color: hotpink;
        `}
      >
        Some text
      </div>
    </div>
  </CacheProvider>
)

Some text