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/react'
import createCache from '@emotion/cache'
import { prefixer } from 'stylis'

const myCache = createCache({
  key: 'my-prefix-key',
  stylisPlugins: [
    customPlugin,
    // has to be included manually when customizing `stylisPlugins` if you want to have vendor prefixes added automatically
    prefixer
  ],
})

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>
)

Module "stylis" not found