在样式化组件中使用 `css` 函数是否会导致性能下降？

Question

为了使用 Visual Studio Code 对样式化组件代码进行正确的代码完成、linting 和着色，我们一直使用css函数作为模板包装器。

这是一个例子。 注意蓝色的css函数。

import styled, { css } from 'styled-components/native'; .

如果没有css函数，所有的 css 代码都是简单的绿色文本，没有任何编辑器智能。

这对性能有影响吗？ 我们最好放弃代码编辑器的便利性并使用简单的模板文字吗？

Answer 1

styled-components样式定义在构建时被解析为纯 CSS 并提取到 index.html 文件头部的标签中。

因此，您的 html 文件可能会变大，但要显着降低性能，您需要大量的样式。 那时，您可能只考虑重构。

我的两分钱，如果它对您有用并且您选择的工具不会引入威胁您应用程序活力的新错误和/或性能问题，请坚持使用它，直到您发现需要更改它。