Skip to content

Commit c8609df

Browse files
committed
@emotion/cache docs - added docs for createCache insertionPoint option to the site
1 parent 6e0e388 commit c8609df

File tree

2 files changed

+38
-0
lines changed

2 files changed

+38
-0
lines changed

.changeset/khaki-beds-repair.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'emotion-site': patch
3+
---
4+
5+
@emotion/cache add docs for createCache insertionPoint option

packages/cache/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,41 @@ The prefix before class names. It will also be set as the value of the `data-emo
5555

5656
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.
5757

58+
### `insertionPoint`
59+
60+
`Node`
61+
62+
This defines specific dom node after which the rules are inserted into the container. You can use a meta tag to specify the specific location:
63+
64+
```jsx
65+
const head = document.querySelector('head')
66+
67+
// <meta name="emotion-insertion-point" content="">
68+
const emotionInsertionPoint = document.createElement('meta')
69+
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
70+
emotionInsertionPoint.setAttribute('content', '')
71+
72+
head.appendChild(emotionInsertionPoint)
73+
74+
// the emotion sheets should be inserted right after the meta tag
75+
const cache = createCache({
76+
key: 'my-app',
77+
insertionPoint: emotionInsertionPoint
78+
})
79+
80+
function App() {
81+
return (
82+
<CacheProvider value={cache}>
83+
<Main />
84+
</CacheProvider>
85+
)
86+
}
87+
```
88+
5889
### `prepend`
5990

6091
`boolean`
6192

93+
**Deprecated:** Please use `insertionPoint` option instead.
94+
6295
A boolean representing whether to prepend rather than append style tags into the specified container DOM node.

0 commit comments

Comments
 (0)