$ npm install @emotion/cache
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 */
]
})
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
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
,
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 string representing whether to prepend rather than append style tags into the specified container DOM node.
© 2010 - cnpmjs.org x YWFE | Home | YWFE