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

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

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

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

作用域樣式：不再有類名沖突。樣式適用于每個組件。

動態(tài)樣式：使用 JavaScript 邏輯，更改有關道具、主題或應用程序狀態(tài)的樣式。

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

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

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

樣式組件：

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

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

點我

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

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

情感：靈活性和性能
另一個強大的 CSS-in-JS 庫是 Emotion，它以靈活性和性能而聞名。它提供了兩種主要的樣式設置方式：用于內聯(lián)樣式的 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；
背景顏色：白色；

對于動態(tài)內聯(lián)樣式：

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

constdynamicStyle = css`
顏色：藍色；
字體大?。?6px;

你好，情感！

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

服務器端渲染：Emotion 針對 SSR 進行了高度優(yōu)化，因此在需要出色 SEO 性能的應用程序中找到了完美的用例。

CSS-in-JS 的最佳實踐
有一些有效使用 CSS-in-JS 的最佳實踐，它們有助于保持性能并保持樣式干凈：

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

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

從“樣式組件”導入 { ThemeProvider };

常量主題 = {
PrimaryColor: '#6200ea',
字體大?。?16px'，
};

道具驅動樣式：動態(tài)道具允許您根據(jù)組件狀態(tài)甚至傳入數(shù)據(jù)更改樣式。在 Styled-Components 和 Emotion 中，props 都為你的組件提供了一種簡單的方式來滿足不同使用場景的需求，而無需重寫樣式。

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

主按鈕
輔助按鈕

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

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

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

情感：更靈活且性能優(yōu)化。如果您需要 SSR 支持或尋求一個可以為您提供內聯(lián)和可重用樣式選項的庫，Emotion 將是最合適的。

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

通過緊貼最佳實踐（范圍內聯(lián)樣式、主題利用和 prop 驅動樣式），您可以充分利用 CSS-in-JS 來清理和擴展代碼。

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

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