@ 有弹性/情绪表

一个叉子 @emotion/sheet 打算用在基巴纳.

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()

谢谢

此样式表基于 闪光板样式 撰写人: 苏尼尔派。 。 。