比較這兩種工具在設(shè)置 React 應(yīng)用樣式時(shí)的方法。風(fēng)格化根據(jù)您編寫的內(nèi)容生成實(shí)用程序優(yōu)先的CSS。它適用于任何框架和任何工具。帶樣式的組件是用于設(shè)置 React 組件樣式的庫(kù)。本文不是關(guān)于哪種工具更好，而是關(guān)于比較使用這些工具設(shè)置應(yīng)用樣式時(shí)的方法。

　　設(shè)置

　　對(duì)于下面的所有示例，我將使用 vite-react 設(shè)置。

　　樣式化需要安裝和一些配置。這是因?yàn)?CSS 是在應(yīng)用初始化之前在構(gòu)建期間生成的：

　　npm i -D @stylify/unplugin

　　和配置.js：

　　您可以嘗試編輯堆棧閃電戰(zhàn)上的風(fēng)格化+維特+反應(yīng)和風(fēng)格化+下一個(gè)示例。

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

　　npm i styled-components

　　語(yǔ)法和用法

　　如果要使用“帶樣式的組件”設(shè)置元素的樣式，可以使用 CSS API 或創(chuàng)建組件：

　　生成的 CSS 如下所示：

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

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

　　無(wú)需定義組件即可立即寫入選擇器。

　　輸出：

　　但是，沒(méi)有人想要帶有實(shí)用程序的臃腫模板。有時(shí)組件是必需的。它們可以在配置中全局定義，也可以在文件中本地定義(通過(guò)內(nèi)容選項(xiàng))，并在文件中使用它們。在文件中，它需要一個(gè)沒(méi)有周圍括號(hào)的 javascript 對(duì)象。建議在注釋中使用該定義，因?yàn)閹缀跞魏挝募袷蕉伎梢蕴幚碜⑨?。在樣式化中，組件是一個(gè)CSS類，它可以用于任何元素：

　　CSS 中的選擇器附加到它需要的每個(gè)選擇器。因此，選擇器/重復(fù)項(xiàng)較少，CSS較小。title

　　在生產(chǎn)方面，可以選擇器可以縮?。?/p>

　　HTML：

　　CSS：

　　媒體查詢

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

　　使用樣式化，您可以使用預(yù)定義的屏幕或動(dòng)態(tài)屏幕：

　　變量

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

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

　　當(dāng)存在我們需要各種類型的一個(gè)按鈕的情況時(shí)，我們需要在Stylify中編寫完整的選擇器：

　　關(guān)鍵幀

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

　　在風(fēng)格化中，它看起來(lái)有點(diǎn)不同：

　　一個(gè)簡(jiǎn)單的動(dòng)畫示例：

　　設(shè)置關(guān)鍵幀樣式示例

　　普通選擇器

　　當(dāng)涉及到全局樣式和簡(jiǎn)單選擇器時(shí)，可以使用在樣式化組件中定義它們：createGlobalStyle

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

　　拆分?jǐn)鄬訏呙?/strong>