如果您曾經(jīng)處理過複雜、龐大的 CSS 文件，或者在大型專案中努力保持樣式有序，那麼您一定會喜歡 JS 中的 CSS。這是因為，透過這種方法，您可以直接在 JavaScript 中編寫 CSS，這使得樣式模組化且靈活，使其完美適合 React 等基於元件的框架。

我們將深入研究兩個最受歡迎的 CSS-in-JS 庫：Styled-Components 和 Emotion，並為您提供一些如何有效使用它們的實用技巧。

讓我們深入了解這個工具如何在不犧牲乾淨(jìng)、可維護、可擴展的程式碼的情況下改變您的樣式。

為什麼選 CSS-in-JS？
JS 中的 CSS 流行的原因之一是它解決了現(xiàn)代 Web 開發(fā)中最大的挑戰(zhàn)之一，特別是對於建立大型應(yīng)用程式的團隊而言。透過在 JavaScript 中移動樣式，我們實現(xiàn)了以下目標(biāo)：

作用域樣式：不再有類別名稱衝突。樣式適用於每個組件。

動態(tài)樣式：使用 JavaScript 邏輯，變更有關(guān)道具、主題或應(yīng)用程式狀態(tài)的樣式。

基於元件的開發(fā)：CSS-in-JS 函式庫自然地與基於元件的框架（例如 React、Vue 和 Angular）結(jié)合。這使您的樣式保持封裝和模組化。

樣式組件：基礎(chǔ)知識
Styled-Components 可能是 CSS-in-JS 生態(tài)系統(tǒng)中最受歡迎的函式庫之一，它非常簡單且易於與 React 一起使用。

快速入門
安裝樣式組件：
$ npm install styled-components
然後將其匯入到您的元件中：
$ 從 'styled-components' 匯入樣式；

樣式組件：

const Button = styled.button`
背景顏色：#6200ea;
顏色：白色；
內(nèi)邊距：10px 20px；
邊框半徑：5px；
邊框：無；
遊標(biāo)：指針；

&:懸停{
背景顏色：#3700b3;
}
在 JSX 中使用樣式化元件：

點我

主要特點：
主題化：使用樣式元件，您可以建立主題以在整個應(yīng)用程式中實現(xiàn)一致的樣式。

動態(tài)樣式：人們可能想要更改動態(tài)樣式的方式。這將與 props 齊頭並進，創(chuàng)建非常靈活且可重複使用的元件。

情緒：彈性與表現(xiàn)
另一個強大的 CSS-in-JS 庫是 Emotion，它以靈活性和性能而聞名。它提供了兩種主要的樣式設(shè)定方式：用於內(nèi)聯(lián)樣式的 css prop，以及可重複使用元件的 styled。

快速入門
安裝情感：

npm install @emotion/react @emotion/styled
導(dǎo)入與使用：

從「@emotion/styled」匯入樣式；

const Card = styled.div`
內(nèi)邊距：20px；
盒子陰影: 0 4px 8px rgba(0, 0, 0, 0.2);
邊框半徑：8px；
背景顏色：白色；

對於動態(tài)內(nèi)嵌樣式：

從 '@emotion/react' 導(dǎo)入 { css };

constdynamicStyle = css`
顏色：藍色；
字體大小：16px;

你好，情感！

主要特點：
內(nèi)聯(lián)和可重複使用樣式：透過 Emotion 的 css 和樣式 API 實現(xiàn)更多控制、更靈活的樣式方法。

伺服器端渲染：Emotion 針對 SSR 進行了高度最佳化，因此在需要出色 SEO 效能的應(yīng)用程式中找到了完美的用例。

CSS-in-JS 的最佳實踐
有一些有效使用 CSS-in-JS 的最佳實踐，它們有助於保持性能並保持樣式乾淨(jìng)：

避免太多內(nèi)聯(lián)動態(tài)樣式：內(nèi)聯(lián)樣式非常適合一次性細微調(diào)整。然而，太多會造成效能瓶頸。相反，套用樣式元件以實現(xiàn)可重複使用樣式，並將內(nèi)聯(lián)樣式限制在真正需要的時候。

利用主題：使用主題來強制應(yīng)用程式中的結(jié)構(gòu)和外觀保持一致。像 Styled-Components 和 Emotion 這樣的函式庫允許定義一個全域主題。這將使在組件中應(yīng)用品牌顏色、字體和其他樣式標(biāo)準(zhǔn)變得更加容易。

從「樣式元件」匯入 { ThemeProvider };

常數(shù)主題 = {
PrimaryColor: '#6200ea',
字體大?。?16px'，
};

道具驅(qū)動樣式：動態(tài)道具可讓您根據(jù)組件狀態(tài)甚至傳入資料變更樣式。在 Styled-Components 和 Emotion 中，props 都為你的元件提供了一種簡單的方式來滿足不同使用情境的需求，而無需重寫樣式。

const Button = styled.button`
背景顏色：${(props) => (props.primary ? '#6200ea' : '#eee')};
顏色：${(props) => (props.primary ? '白色' : '黑色')};

主按鈕
輔助按鈕

程式碼拆分：請注意，如果您不小心，CSS-in-JS 庫可能會導(dǎo)致更大的套件。利用程式碼分割等技術(shù)，僅載入應(yīng)用程式每個部分所需的樣式，以獲得良好的效能。

樣式組件與情感
使用哪一個？兩者都是令人驚嘆的庫，並且各自滿足不同的需求?？焖俦容^：

styled-components：最適合需要主題和易用性的 React 應(yīng)用程式。它被高度採用，並且有非常好的文檔，因此對初學(xué)者很友好。

情緒：更靈活且效能最佳化。如果您需要 SSR 支援或?qū)で笠粋€可以為您提供內(nèi)聯(lián)和可重複使用樣式選項的庫，Emotion 將是最合適的。

CSS-in-JS 代表了一種實現(xiàn)現(xiàn)代 Web 樣式的強大方法，特別是如果您是使用元件驅(qū)動框架的開發(fā)人員。透過 Styled-Components 和 Emotion 等函式庫，您可以在整個應(yīng)用程式中保持樣式模組化、動態(tài)和一致。

透過緊貼最佳實踐（範(fàn)圍內(nèi)嵌樣式、主題利用和 prop 驅(qū)動樣式），您可以充分利用 CSS-in-JS 來清理和擴展程式碼。

準(zhǔn)備好改變您在 CSS 中的工作方式了嗎？好吧，親自嘗試 CSS-in-JS！

以上是JS 中的 CSS：樣式元件、情緒等的完整指南，以實現(xiàn)更清晰和可擴展的樣式。的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！