字符串化情感js-css结果

Question

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

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

我想，如果我找到了一种方法来字符串化emotion.jscss的输出结果，我可以用固定的类名手动将其附加到文档头，并在需要时更改其内容，但显然没有办法做到这一点，以下是我所期望的：

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

要打印：

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

有什么建议吗？

Answer 1

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

const result = css`
div {
display: flex;
}`;
console.log(result.styles)

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