React 中的 CSS-in-JS

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

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

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

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

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

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

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

5. 主題：CSS-in-JS 可以更輕松地創(chuàng)建全局主題。您可以在頂層定義配色方案、版式和其他共享樣式，并將它們動態(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 庫，它提供了強大的樣式解決方案。它與樣式組件類似，但具有一些附加功能，例如性能優(yōu)化和對服務(wù)器端渲染的更好支持。

示例：使用情感

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ù)用于創(chuàng)建樣式定義，可以通過 styled API 將其應(yīng)用于組件。
• 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)樣式的大型應(yīng)用程序。
2. 增加捆綁包大小：由于樣式與 JavaScript 代碼捆綁在一起，因此可能會增加 JavaScript 捆綁包的大小。
3. 學習曲線：對于習慣傳統(tǒng) CSS 或基于預(yù)處理器的工作流程（如 Sass）的開發(fā)人員來說，過渡到 CSS-in-JS 可能需要一個學習曲線。
4. 關(guān)注點分離：一些開發(fā)者認為將樣式和邏輯組合在同一個文件中違反了關(guān)注點分離原則。

CSS-in-JS 的最佳實踐

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