JS 中的 CSS：樣式元件、情緒等的完整指南，以實現更清晰和可擴展的樣式。

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

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

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

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

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

動態樣式：使用 JavaScript 邏輯，變更有關道具、主題或應用程式狀態的樣式。

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

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

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

樣式組件：

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

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

點我

主要特點：
主題化：使用樣式元件，您可以建立主題以在整個應用程式中實現一致的樣式。

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

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

快速入門
安裝情感：

npm install @emotion/react @emotion/styled
導入與使用：

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

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

對於動態內嵌樣式：

從 '@emotion/react' 導入 { css };

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

你好，情感！

主要特點：
內聯和可重複使用樣式：透過 Emotion 的 css 和樣式 API 實現更多控制、更靈活的樣式方法。

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

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

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

利用主題：使用主題來強制應用程式中的結構和外觀保持一致。像 Styled-Components 和 Emotion 這樣的函式庫允許定義一個全域主題。這將使在組件中應用品牌顏色、字體和其他樣式標準變得更加容易。

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

常數主題 = {
PrimaryColor: '#6200ea',
字體大小：'16px'，
};

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

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

主按鈕
輔助按鈕

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

樣式組件與情感
使用哪一個？兩者都是令人驚嘆的庫，並且各自滿足不同的需求。快速比較：

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

情緒：更靈活且效能最佳化。如果您需要 SSR 支援或尋求一個可以為您提供內聯和可重複使用樣式選項的庫，Emotion 將是最合適的。

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

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

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

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