比較這兩種工具在設置 React 應用樣式時的方法。風格化根據您編寫的內容生成實用程序優先的CSS。它適用于任何框架和任何工具。帶樣式的組件是用于設置 React 組件樣式的庫。本文不是關于哪種工具更好，而是關于比較使用這些工具設置應用樣式時的方法。

　　設置

　　對于下面的所有示例，我將使用 vite-react 設置。

　　樣式化需要安裝和一些配置。這是因為 CSS 是在應用初始化之前在構建期間生成的：

　　npm i -D @stylify/unplugin

　　和配置.js：

　　您可以嘗試編輯堆棧閃電戰上的風格化+維特+反應和風格化+下一個示例。

　　樣式化組件只需要安裝庫，就可以立即使用。

　　npm i styled-components

　　語法和用法

　　如果要使用“帶樣式的組件”設置元素的樣式，可以使用 CSS API 或創建組件：

　　生成的 CSS 如下所示：

　　另一方面，樣式化獲取文件內容并為每個匹配的選擇器生成CSS。默認情況下，每個選擇器都是一個實用程序，并且僅生成一次。

　　默認情況下，語法是本機 CSS 。此外，在編寫值時，您可以使用(兩個下劃線)而不是空格和(帽子)作為引號。它類似于Tailwind，但不必學習和記住自定義選擇器和快捷方式。如果您了解 CSS，那么您已經知道樣式化選擇器。如果您需要更短或自定義的選擇器，可以添加自己的宏。property:value__^

　　無需定義組件即可立即寫入選擇器。

　　輸出：

　　但是，沒有人想要帶有實用程序的臃腫模板。有時組件是必需的。它們可以在配置中全局定義，也可以在文件中本地定義(通過內容選項)，并在文件中使用它們。在文件中，它需要一個沒有周圍括號的 javascript 對象。建議在注釋中使用該定義，因為幾乎任何文件格式都可以處理注釋。在樣式化中，組件是一個CSS類，它可以用于任何元素：

　　CSS 中的選擇器附加到它需要的每個選擇器。因此，選擇器/重復項較少，CSS較小。title

　　在生產方面，可以選擇器可以縮小：

　　HTML：

　　CSS：

　　媒體查詢

　　當我們需要為各種媒體查詢使用不同的樣式時，我們可以在樣式化組件中像這樣執行此操作：

　　使用樣式化，您可以使用預定義的屏幕或動態屏幕：

　　變量

　　變量可以直接在樣式化組件中使用：

　　樣式化允許您定義變量，然后在選擇器中使用它們：

　　當存在我們需要各種類型的一個按鈕的情況時，我們需要在Stylify中編寫完整的選擇器：

　　關鍵幀

　　樣式化零部件中的關鍵幀可以按如下方式定義：

　　在風格化中，它看起來有點不同：

　　一個簡單的動畫示例：

　　設置關鍵幀樣式示例

　　普通選擇器

　　當涉及到全局樣式和簡單選擇器時，可以使用在樣式化組件中定義它們：createGlobalStyle

　　在樣式化中，使用普通選擇器也可以實現相同的操作。選擇器直接注入到生成的 CSS 文件中。

　　拆分斷層掃描

　　在優化方面，樣式化組件是一個很好的工作，因為它會自動將CSS拆分為關鍵和非關鍵，并注入所用組件的CSS。但是，編譯是在應用運行時完成的。

　　風格化不是這樣工作的。

　　它根據您的配置生成CSS文件，您必須告訴應用程序何時應加載CSS。

　　您可以為每個頁面/組件/布局單獨配置捆綁包。即使您可以根據需要拆分CSS，但由于實用程序/組件組合，CSS的大小將相對較小，因為選擇器僅生成一次。因此，有時只有前端+管理員CSS是有意義的。樣式化網站的 Kb 小于 20 Kb，其他網站在 30–50 Kb 之間，

　　還有一個功能是，它不會減慢應用程序的速度，因為 CSS 是在應用程序初始化之前生成的。