在 Svelte 中使用 CSS-in-JS

CSS 是任何 Web 應用程式的核心部分。因此，一個沒有內建方法來為你的組件添加樣式的 UI 框架是不完整的。

這就是為什麼 Svelte 允許你在組件的 <style> 標籤中添加 CSS。將你的 CSS 與你的標記放在一起意味著我們可以解決開發人員在編寫 CSS 時面臨的最大問題，而不會引入新的問題，同時提供相當好的開發體驗。

但 Svelte 的樣式處理確實有一些限制。在組件之間共享樣式，或應用程式層級的優化太困難了。這些是我們計劃在未來版本中解決的領域，但同時，如果你需要這些功能，你可以使用任何與框架無關的 CSS-in-JS 函式庫。

例如

在這裡，我們使用 Emotion 來產生可以在多個組件中使用的範圍類別名稱

重要的是要注意，大多數 CSS-in-JS 函式庫都有一個執行階段函式庫，而且許多函式庫不支援在建置時將樣式靜態地提取到單獨的 .css 檔案中（這對於最佳效能至關重要）。因此，只有在你的應用程式需要時才應使用 CSS-in-JS！

請注意，你可以混合搭配 — 你仍然可以將 Svelte 的內建 CSS 處理與 CSS-in-JS 函式庫一起使用。