字符串化情感js css结果答案

【问题标题】：Stringify emotion js css results字符串化情感js css结果
【发布时间】：2021-12-17 04:33:45
【问题描述】：

我发现，每次 styled 属性发生变化时，emotion.js 都会创建并追加新的 style，这会带来性能成本，尤其是当变量快速变化时，例如拖动元素时。

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

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

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

  console.log(result);

打印：

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

有什么建议吗？

【问题讨论】：

【解决方案1】：

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

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

console.log(result.styles)

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

【讨论】：