1# @emotion/sheet 2 3> A StyleSheet for css-in-js libraries 4 5```bash 6yarn add @emotion/sheet 7``` 8 9```jsx 10import { StyleSheet } from '@emotion/sheet' 11 12const sheet = new StyleSheet({ key: '', container: document.head }) 13 14sheet.insert('html { color: hotpink; }') 15``` 16 17> **Note:** 18> This is not useful for server-side rendering, you should implement SSR seperately 19 20## StyleSheet 21 22### Options 23 24```ts 25type Options = { 26 nonce?: string 27 key: string 28 container: HTMLElement 29 speedy?: boolean 30 prepend?: boolean 31} 32``` 33 34#### nonce 35 36A nonce that will be set on each style tag that the sheet inserts for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). 37 38#### container 39 40A DOM Node that the sheet will insert all of it's style tags into, this is useful for inserting styles into iframes. 41 42#### key 43 44This will be set as the value of the `data-emotion` attribute on the style tags that get inserted. This is useful to identify different sheets. 45 46#### speedy 47 48This defines how rules are inserted. If it is true, rules will be inserted with [`insertRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) which is very fast but doesn't allow rules to be edited in DevTools. If it is false, rules will be inserted by appending text nodes to style elements which is much slower than insertRule but allows rules to be edited in DevTools. By default, speedy is enabled in production and disabled in development. 49 50#### prepend 51 52This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option. 53 54### Methods 55 56#### insert 57 58This method inserts a single rule into the document. It **must** be a single rule otherwise an error will be thrown in speedy mode which is enabled by default in production. 59 60#### flush 61 62This method will remove all style tags that were inserted into the document. 63 64#### hydrate 65 66This method moves given style elements into sheet's container and put them into internal tags collection. It's can be used for SSRed styles. 67 68### Example with all options 69 70```jsx 71import { StyleSheet } from '@emotion/sheet' 72 73const container = document.createElement('div') 74 75document.head.appendChild(container) 76 77const sheet = new StyleSheet({ 78 nonce: 'some-nonce', 79 key: 'some-key', 80 container 81}) 82 83sheet.insert('html { color: hotpink; }') 84 85sheet.flush() 86``` 87 88# Thanks 89 90This StyleSheet is based on [glamor's StyleSheet](https://github.com/threepointone/glamor) written by [Sunil Pai](https://github.com/threepointone). ❤️ 91