@emotion/表单
Cs-in-js 库的样式表
yarn add @emotion/sheet
import { StyleSheet } from '@emotion/sheet'
const sheet = new StyleSheet({ key: '', container: document.head })
sheet.insert('html { color: hotpink; }')
说明: 这对服务器侧渲染没有用, 您应该单独执行 SSR
样式表
选项
type Options = {
nonce?: string
key: string
container: Node
speedy?: boolean
prepend?: boolean
}
无
在工作表插入的每个样式标签上设置一个非ce 内容 安全政策。 。 。 .
集装箱
工作表会插入所有样式标记的 DOM 节点, 这对于向 Iframes 插入样式很有用 .
键
这将设定为 data-emotion 属性在被插入的样式标签上。 这有助于识别不同的工作表.
快点
这定义了规则的插入方式。 如果这是真的,规则将插入 insertRule 它非常快,但不允许规则在 DevTools 中编辑。 如果错误, 规则将被添加到样式元素的文本节点中, 它比插入规则慢得多, 但允许规则在 DevTools 中编辑 。 默认情况下,能够迅速生产,在发展中丧失能力.
预选
折旧: 请使用 insertionPoint 选项.
这定义了规则插入到 container。默认情况下,它们会被附加,但可以通过使用 prepend: true 选项.
插入点
这定义了特定的多姆节点,然后规则插入到 container您可以使用一个 meta 指定具体位置的标签 :
const head = document.querySelector('head')
// <meta name="emotion-insertion-point" content="">
const emotionInsertionPoint = document.createElement('meta')
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
emotionInsertionPoint.setAttribute('content', '')
head.appendChild(emotionInsertionPoint)
// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
insertionPoint: emotionInsertionPoint
})
function App() {
return (
<CacheProvider value={cache}>
<Main />
</CacheProvider>
)
}
方法
插入
这种方法在文档中插入了一条规则。 这个 必须 否则,错误将会被抛入快速模式,在生产过程中默认允许.
冲出
此方法将删除插入文档的所有样式标记 .
水合盐
这种方法将给定的样式元素移入工作表的容器,并放入内部标签收集中。 可用于SSRed风格.
所有选项的示例
import { StyleSheet } from '@emotion/sheet'
const container = document.createElement('div')
document.head.appendChild(container)
const sheet = new StyleSheet({
nonce: 'some-nonce',
key: 'some-key',
container
})
sheet.insert('html { color: hotpink; }')
sheet.flush()