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

我們將深入研究?jī)蓚€(gè)最流行的 CSS-in-JS 庫(kù)：Styled-Components 和 Emotion，并為您提供一些如何有效使用它們的實(shí)用技巧。

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

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

作用域樣式：不再有類(lèi)名沖突。樣式適用于每個(gè)組件。

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

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

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

快速入門(mén)
安裝樣式組件：
$ npm install styled-components
然后將其導(dǎo)入到您的組件中：
$ 從 'styled-components' 導(dǎo)入樣式；

樣式組件：

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

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

點(diǎn)我

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

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

情感：靈活性和性能
另一個(gè)強(qiáng)大的 CSS-in-JS 庫(kù)是 Emotion，它以靈活性和性能而聞名。它提供了兩種主要的樣式設(shè)置方式：用于內(nèi)聯(lián)樣式的 css prop，以及用于可重用組件的 styled。

快速入門(mén)
安裝情感：

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

從“@emotion/styled”導(dǎo)入樣式；

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

對(duì)于動(dòng)態(tài)內(nèi)聯(lián)樣式：

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

constdynamicStyle = css`
顏色：藍(lán)色；
字體大?。?6px;

你好，情感！

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

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

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

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

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

從“樣式組件”導(dǎo)入 { ThemeProvider };

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

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

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

主按鈕
輔助按鈕

代碼拆分：請(qǐng)注意，如果您不小心，CSS-in-JS 庫(kù)可能會(huì)導(dǎo)致更大的包。利用代碼分割等技術(shù)，僅加載應(yīng)用程序每個(gè)部分所需的樣式，以獲得良好的性能。

樣式組件與情感
使用哪一個(gè)？?jī)烧叨际橇钊梭@嘆的庫(kù)，并且各自滿(mǎn)足不同的需求?？焖俦容^：

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

情感：更靈活且性能優(yōu)化。如果您需要 SSR 支持或?qū)で笠粋€(gè)可以為您提供內(nèi)聯(lián)和可重用樣式選項(xiàng)的庫(kù)，Emotion 將是最合適的。

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

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

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

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