reactjs - 字符串化情感js css结果

Question

我发现，style每次styledprops 更改时，emotion.js 都会创建并追加新的，这会降低性能，尤其是当变量快速变化时，例如拖动元素时。

防止emotion.js创建新样式的一种方法是根本不使用道具，而是使用css变量，但这有其自身的挑战。

我想如果我找到了一种方法来将情感.js 的字符串输出结果css，我可以手动将它与固定的类名附加到文档头并在需要时更改其内容，但显然没有办法这样做，这就是我我期待：

  const result = css`
   div {
      display: flex;
   }
  `.toString();

  console.log(result);

打印：

    div {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

有什么建议吗？

score 0 · Accepted Answer

您可以在变量上调用该.styles方法，即

const result = css`
div {
    display: flex;
}`;

console.log(result.styles)

结果："div{display:flex;};label:result;"

1 回答 1