為 React 項(xiàng)目選擇 CSS 樣式方法可能會因?yàn)檫@么多的選擇而感到不知所措！讓我們通過示例來分解一些流行的方法，以便您了解每種方法的工作原理。我將使用一個(gè)簡單的 Button 組件作為示例，介紹 CSS 模塊、SCSS、Tailwind CSS 和帶有樣式組件的 CSS-in-JS。

---

1. CSS 模塊 ?

CSS 模塊通過將樣式范圍限定到導(dǎo)入樣式的組件來幫助保持樣式模塊化并避免沖突。

優(yōu)點(diǎn)：作用域樣式，JSX 中沒有內(nèi)聯(lián) CSS，組織良好。
缺點(diǎn)：仍然需要單獨(dú)的 CSS 文件；沒有 SCSS 就沒有嵌套或變量。

設(shè)置：
為每個(gè)組件創(chuàng)建一個(gè)文件，例如 Button.module.css.

Button.module.css:

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Button.js:

import React from 'react';
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;

這里，styles.button指的是Button.module.css中的.button類。這樣，樣式僅適用于該 Button 組件。

---

2. SCSS (Sass) ?

SCSS 就像具有超能力的 CSS。您可以使用變量、嵌套等來使樣式更易于管理，尤其是在大型應(yīng)用程序中。

優(yōu)點(diǎn)：變量、嵌套、混合。
缺點(diǎn)：需要進(jìn)行 SCSS 預(yù)處理設(shè)置。

設(shè)置：
安裝 SCSS 支持，然后創(chuàng)建您的 SCSS 文件。

Button.scss:

$button-bg: #3498db;
$button-color: white;

.button {
  background-color: $button-bg;
  color: $button-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken($button-bg, 10%);
  }
}

Button.js:

import React from 'react';
import './Button.scss';

function Button() {
  return <button className="button">Click Me</button>;
}

export default Button;

在這里，我們使用 SCSS 變量 ($button-bg) 和嵌套選擇器（例如 &:hover）。 SCSS 有助于保持復(fù)雜的樣式整潔且可讀。

---

3. Tailwind CSS ?

Tailwind CSS 直接在 JSX 中使用實(shí)用程序類應(yīng)用樣式，讓您無需編寫單獨(dú)的 CSS 即可快速構(gòu)建原型和樣式。

優(yōu)點(diǎn)：應(yīng)用樣式速度快，一致性好。
缺點(diǎn)：感覺像是內(nèi)聯(lián)樣式、冗長的類名。

設(shè)置：
安裝 Tailwind CSS 并將其導(dǎo)入到您的項(xiàng)目中。

Button.js:

import React from 'react';

function Button() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
      Click Me
    </button>
  );
}

export default Button;

bg-blue-500（背景顏色）和 px-4（填充）等實(shí)用程序類使樣式設(shè)計(jì)快速且一致。如果您喜歡快速開發(fā)，Tailwind 非常適合！

---

4. 帶有樣式組件的 CSS-in-JS ??

Styled-components 允許您直接在 JavaScript 文件中設(shè)置組件樣式，并將 CSS 范圍限定為每個(gè)組件。

優(yōu)點(diǎn)：本地范圍，易于使用道具自定義，不需要單獨(dú)的 CSS 文件。
缺點(diǎn)：可能會增加大型項(xiàng)目的復(fù)雜性。

設(shè)置：
安裝 styled-components 并直接在組件文件中使用它。

Button.js:

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

使用樣式組件，您可以在 JS 文件中編寫實(shí)際的 CSS，使樣式保持接近組件。它非常適合創(chuàng)建基于道具的動態(tài)樣式。

---

最后的想法

每種方法都有自己的優(yōu)點(diǎn)，因此請選擇適合您的項(xiàng)目和團(tuán)隊(duì)的方法。快樂造型！ ？

如果您需要有關(guān)這些方法或其他示例的更多幫助，請隨時(shí)與我們聯(lián)系！

以上是比較 React 中的 CSS 樣式方法：通過代碼示例讓選擇更容易的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！