React 中的 CSS-in-JS

CSS-in-JS 是一種將 CSS 樣式寫入 JavaScript 檔案內(nèi)的技術(shù)。它允許開發(fā)人員使用 JavaScript 語(yǔ)法編寫 CSS 規(guī)則，提供更動(dòng)態(tài)和模組化的方法來(lái)設(shè)計(jì) React 應(yīng)用程式。隨著基於元件的架構(gòu)的興起，這種技術(shù)越來(lái)越受歡迎，其中樣式的範(fàn)圍僅限於單一元件而不是全域樣式表。

在 React 中，CSS-in-JS 使樣式能夠與其所屬的元件緊密聯(lián)繫在一起，確保樣式易於維護(hù)和擴(kuò)展。有幾個(gè)流行的函式庫(kù)實(shí)現(xiàn)了這種技術(shù)，例如 Styled Components、Emotion 和 JSS。

CSS-in-JS 的主要優(yōu)點(diǎn)

1. 作用域樣式：CSS-in-JS 確保樣式作用於各個(gè)元件，消除了全域 CSS 衝突的可能性。這使得應(yīng)用程式更易於維護(hù)，因?yàn)闃邮皆谄湓?nèi)是隔離的。

2. 動(dòng)態(tài)樣式：透過 CSS-in-JS，可以輕鬆使用 JavaScript 變數(shù)、道具和狀態(tài)來(lái)根據(jù)元件邏輯動(dòng)態(tài)變更樣式。例如，您可以根據(jù)按鈕的狀態(tài)變更按鈕的顏色。

3. 基於元件的樣式：樣式與元件邏輯一起編寫，使其更易於管理，尤其是在大型應(yīng)用程式中。這允許更加模組化和可維護(hù)的程式碼庫(kù)。

4. 自動(dòng)供應(yīng)商前綴：許多 CSS-in-JS 庫(kù)，例如 Styled Components 和 Emotion，會(huì)自動(dòng)處理供應(yīng)商前綴，確保跨瀏覽器相容性。

5. 主題：CSS-in-JS 可以更輕鬆地建立全域主題。您可以在頂層定義配色方案、版式和其他共享樣式，並將它們動(dòng)態(tài)注入到元件中。

流行的 CSS-in-JS 庫(kù)

1. 樣式組件

樣式化元件 是最受歡迎的 CSS-in-JS 函式庫(kù)之一。它允許您在 JavaScript 檔案中編寫實(shí)際的 CSS 程式碼，但其範(fàn)圍僅限於各個(gè)元件。

範(fàn)例：使用樣式化元件

npm install styled-components

import React from 'react';
import styled from 'styled-components';

// Create a styled component
const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

說明：

• styled.button 是 Styled Components 提供的函數(shù)，可讓您為按鈕元件定義樣式。
• 樣式的範(fàn)圍僅限於按鈕元件，這表示它不會(huì)影響頁(yè)面上的任何其他按鈕。
• 主要道具用於動(dòng)態(tài)變更按鈕的背景顏色。

2. 情感

Emotion 是另一個(gè)受歡迎的 CSS-in-JS 函式庫(kù)，它提供了強(qiáng)大的樣式解決方案。它與樣式元件類似，但具有一些附加功能，例如效能最佳化和對(duì)伺服器端渲染的更好支援。

範(fàn)例：使用情緒

npm install @emotion/react @emotion/styled

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyle = (primary) => css`
  background-color: ${primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const Button = styled.button`
  ${props => buttonStyle(props.primary)}
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

說明：

• Emotion 中的 css 函數(shù)用於建立樣式定義，可以透過 styled API 將其應(yīng)用於元件。
• Emotion 允許您使用模板文字和 JavaScript 物件編寫樣式。

3. JSS（JavaScript 樣式表）

JSS 是另一個(gè) CSS-in-JS 函式庫(kù)，它允許使用 JavaScript 來(lái)寫 CSS。它透過自訂主題和更高級(jí)的樣式邏輯等功能提供對(duì)樣式的更精細(xì)的控制。

範(fàn)例：使用 JSS

npm install jss react-jss

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: (props) => (props.primary ? 'blue' : 'gray'),
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    '&:hover': {
      opacity: 0.8,
    },
  },
});

const Button = (props) => {
  const classes = useStyles(props);

  return <button className={classes.button}>{props.children}</button>;
};

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

說明：

• createUseStyles是react-jss提供的一個(gè)生成樣式的hook。
• useStyles 鉤子接收 props 並傳回按鈕的類別名稱。
• 此方法還允許基於傳遞給元件的 props 進(jìn)行動(dòng)態(tài)樣式。

CSS-in-JS 的挑戰(zhàn)

雖然 CSS-in-JS 有許多優(yōu)點(diǎn)，但它也面臨一系列挑戰(zhàn)：

1. 效能開銷：CSS-in-JS 函式庫(kù)可能會(huì)帶來(lái)效能開銷，特別是對(duì)於具有多種動(dòng)態(tài)樣式的大型應(yīng)用程式。
2. 增加捆綁包大小：由於樣式與 JavaScript 程式碼捆綁在一起，因此可能會(huì)增加 JavaScript 捆綁包的大小。
3. 學(xué)習(xí)曲線：對(duì)於習(xí)慣傳統(tǒng) CSS 或基於預(yù)處理器的工作流程（如 Sass）的開發(fā)人員來(lái)說，過渡到 CSS-in-JS 可能需要一個(gè)學(xué)習(xí)曲線。
4. 關(guān)注點(diǎn)分離：有些開發(fā)者認(rèn)為將樣式和邏輯組合在同一個(gè)文件中違反了關(guān)注點(diǎn)分離原則。

CSS-in-JS 的最佳實(shí)踐

1. 使用主題：利用 CSS-in-JS 庫(kù)提供的主題功能來(lái)管理應(yīng)用程式的全域樣式（例如顏色、字體）。
2. 保持樣式作用域：使用 styled-components 或 JSS 將樣式保持在其所屬組件的作用域內(nèi)，防止全域樣式相互幹?jǐn)_。
3. 限制動(dòng)態(tài)樣式：謹(jǐn)慎使用動(dòng)態(tài)樣式，因?yàn)檫^多的動(dòng)態(tài)樣式可能會(huì)對(duì)表現(xiàn)產(chǎn)生負(fù)面影響。
4. 使用適當(dāng)?shù)墓ぞ?/strong>：像Babel這樣的工具可以幫助優(yōu)化CSS-in-JS庫(kù)的效能，例如透過縮小生成的CSS。