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)越受歡迎，其中樣式的范圍僅限于單個(gè)組件而不是全局樣式表。

在 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)闃邮皆谄浣M件內(nèi)是隔離的。

2. 動(dòng)態(tài)樣式：通過(guò) CSS-in-JS，可以輕松使用 JavaScript 變量、道具和狀態(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)商前綴，確?？鐬g覽器兼容性。

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

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

1. 樣式組件

樣式組件 是最流行的 CSS-in-JS 庫(kù)之一。它允許您在 JavaScript 文件中編寫實(shí)際的 CSS 代碼，但其范圍僅限于各個(gè)組件。

示例：使用樣式化組件

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;

說(shuō)明：

• styled.button 是 Styled Components 提供的一個(gè)函數(shù)，允許您為按鈕組件定義樣式。
• 樣式的范圍僅限于按鈕組件，這意味著它不會(huì)影響頁(yè)面上的任何其他按鈕。
• 主要道具用于動(dòng)態(tài)更改按鈕的背景顏色。

2. 情感

Emotion 是另一個(gè)流行的 CSS-in-JS 庫(kù)，它提供了強(qiáng)大的樣式解決方案。它與樣式組件類似，但具有一些附加功能，例如性能優(yōu)化和對(duì)服務(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;

說(shuō)明：

• Emotion 中的 css 函數(shù)用于創(chuàng)建樣式定義，可以通過(guò) styled API 將其應(yīng)用于組件。
• Emotion 允許您使用模板文字和 JavaScript 對(duì)象編寫樣式。

3. JSS（JavaScript 樣式表）

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

示例：使用 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;

說(shuō)明：

• 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)說(shuō)，過(guò)渡到 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)，防止全局樣式相互干擾。
3. 限制動(dòng)態(tài)樣式：謹(jǐn)慎使用動(dòng)態(tài)樣式，因?yàn)檫^(guò)多的動(dòng)態(tài)樣式可能會(huì)對(duì)性能產(chǎn)生負(fù)面影響。
4. 使用適當(dāng)?shù)墓ぞ?/strong>：像Babel這樣的工具可以幫助優(yōu)化CSS-in-JS庫(kù)的性能，例如通過(guò)縮小生成的CSS。