.. | ||
dist | ||
src | ||
types | ||
CHANGELOG.md | ||
LICENSE | ||
package.json | ||
README.md |
@emotion/cache
createCache
createCache
allows for low level customization of how styles get inserted by emotion. It's intended to be used with the <CacheProvider/>
component to override the default cache, which is created with sensible defaults for most applications.
import createCache from '@emotion/cache'
export const myCache = createCache({
key: 'my-prefix-key',
stylisPlugins: [
/* your plugins here */
]
})
Primary use cases
-
Using emotion in embedded contexts such as an
<iframe/>
-
Setting a nonce on any
<style/>
tag emotion creates for security purposes -
Using emotion with a developer defined
<style/>
tag -
Using emotion with custom Stylis plugins
Options
nonce
string
A nonce that will be set on each style tag that emotion inserts for Content Security Policies.
stylisPlugins
Array<Function>
A Stylis plugins that will be run by Stylis during preprocessing. Read the Stylis docs to find out more. This can be used for many purposes such as RTL.
Note:
Prefixer is just a plugin which happens to be put in default
stylisPlugins
. If you plan to use customstylisPlugins
and you want to have your styles prefixed automatically you must include prefixer in your customstylisPlugins
. You can importprefixer
from thestylis
module to do that (import { prefixer } from 'stylis'
);
key
string (Pattern: [^a-z-])
The prefix before class names. It will also be set as the value of the data-emotion
attribute on the style tags that emotion inserts and it's used in the attribute name that marks style elements in renderStylesToString
and renderStylesToNodeStream
. This is required if using multiple emotion caches in the same app.
container
HTMLElement
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
prepend
boolean
A boolean representing whether to prepend rather than append style tags into the specified container DOM node.