React 中的 CSS-in-JS

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

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

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

1. 作用域樣式：CSS-in-JS 確保樣式作用於各個元件，消除了全域 CSS 衝突的可能性。這使得應用程式更易於維護，因為樣式在其元件內(nèi)是隔離的。

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

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

4. 自動供應商前綴：許多 CSS-in-JS 庫，例如 Styled Components 和 Emotion，會自動處理供應商前綴，確?？鐬g覽器相容性。

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

流行的 CSS-in-JS 庫

1. 樣式組件

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

範例：使用樣式化元件

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ù)，可讓您為按鈕元件定義樣式。
• 樣式的範圍僅限於按鈕元件，這表示它不會影響頁面上的任何其他按鈕。
• 主要道具用於動態(tài)變更按鈕的背景顏色。

2. 情感

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

範例：使用情緒

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 將其應用於元件。
• Emotion 允許您使用模板文字和 JavaScript 物件編寫樣式。

3. JSS（JavaScript 樣式表）

JSS 是另一個 CSS-in-JS 函式庫，它允許使用 JavaScript 來寫 CSS。它透過自訂主題和更高級的樣式邏輯等功能提供對樣式的更精細的控制。

範例：使用 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提供的一個生成樣式的hook。
• useStyles 鉤子接收 props 並傳回按鈕的類別名稱。
• 此方法還允許基於傳遞給元件的 props 進行動態(tài)樣式。

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

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

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

CSS-in-JS 的最佳實踐

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