在 Svelte 中使用 CSS-in-JS

CSS 是任何 Web 应用程序的核心部分。相应地，一个没有内置方式为组件添加样式的 UI 框架是不完整的。

这就是为什么 Svelte 允许你在组件的 <style> 标签中添加 CSS。将你的 CSS 与你的标记放在一起意味着我们可以在 解决开发人员在编写 CSS 时遇到的最大问题，而不会引入新的问题，同时提供相当不错的开发体验。

但是 Svelte 的样式处理确实有一些限制。在组件之间共享样式或应用应用程序级别的优化过于困难。这些是我们计划在未来版本中解决的领域，但在此期间，如果您需要这些功能，可以使用任何与框架无关的 CSS-in-JS 库。

例如

这里，我们使用 Emotion 生成可在多个组件中使用的作用域类名

需要注意的是，大多数 CSS-in-JS 库都有一个运行时库，并且许多库不支持在构建时将样式静态提取到单独的 .css 文件中（这对获得最佳性能至关重要）。因此，只有在应用程序需要时才应使用 CSS-in-JS！

请注意，您可以混合搭配 - 您仍然可以在 CSS-in-JS 库 alongside Svelte 的内置 CSS 处理。