File tree Expand file tree Collapse file tree 2 files changed +38
-0
lines changed Expand file tree Collapse file tree 2 files changed +38
-0
lines changed Original file line number Diff line number Diff line change 1+ ---
2+ ' emotion-site ' : patch
3+ ---
4+
5+ @emotion/cache add docs for createCache insertionPoint option
Original file line number Diff line number Diff line change @@ -55,8 +55,41 @@ The prefix before class names. It will also be set as the value of the `data-emo
5555
5656A 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+
6295A boolean representing whether to prepend rather than append style tags into the specified container DOM node.
You can’t perform that action at this time.
0 commit comments