在 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 库的同时使用 Svelte 的内置 CSS 处理功能。