CSS-in-JS：React 應用程式的現代樣式

React 中的 CSS-in-JS

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

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

---

CSS-in-JS 的主要優點

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

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

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

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

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

---

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

---

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 函數用於建立樣式定義，可以透過 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 進行動態樣式。

---

CSS-in-JS 的挑戰

雖然 CSS-in-JS 有許多優點，但它也面臨一系列挑戰：

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

---

CSS-in-JS 的最佳實踐

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

---

結論

CSS-in-JS 是一種設計 React 應用程式的現代方法，它將 JavaScript 和 CSS 的力量結合在一起。透過使用Styled Components、Emotion 或JSS 等函式庫，您可以在JavaScript 檔案中編寫樣式，從而提高程式碼庫的模組化、效能和可維護性。然而，平衡 CSS-in-JS 的使用和潛在的效能考慮非常重要，特別是在大型應用程式中。

---

以上是CSS-in-JS：React 應用程式的現代樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！