比較 React 中的 CSS 樣式方法：透過程式碼範例讓選擇更容易

為 React 專案選擇 CSS 樣式方法可能會因為這麼多的選擇而感到不知所措！讓我們透過範例來分解一些流行的方法，以便您了解每種方法的工作原理。我將使用一個簡單的 Button 元件作為範例，介紹 CSS 模組、SCSS、Tailwind CSS 和帶有樣式組件的 CSS-in-JS。

1. CSS 模組 ?

CSS 模組透過將樣式範圍限定到匯入樣式的元件來幫助保持樣式模組化並避免衝突。

優點：作用域樣式，JSX 中沒有內嵌 CSS，組織良好。
缺點：仍然需要單獨的 CSS 檔案；沒有 SCSS 就沒有巢狀或變數。

設定：
為每個元件建立一個文件，例如 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。您可以使用變數、巢狀等來使樣式更易於管理，尤其是在大型應用程式中。

優點：變數、巢狀、混合。
缺點：需要進行 SCSS 預處理設定。

設定：
安裝 SCSS 支持，然後建立您的 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 有助於保持複雜的樣式整潔且可讀。

3. Tailwind CSS ?

Tailwind CSS 直接在 JSX 中使用實用程式類別應用程式樣式，讓您無需編寫單獨的 CSS 即可快速建立原型和樣式。

優點：應用樣式速度快，一致性好。
缺點：感覺像是內嵌樣式、冗長的類別名稱。

設定：
安裝 Tailwind CSS 並將其匯入到您的專案中。

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（填滿）等實用程式類別使樣式設計快速且一致。如果您喜歡快速開發，Tailwind 非常適合！

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

Styled-components 可讓您直接在 JavaScript 檔案中設定元件樣式，並將 CSS 範圍限定為每個元件。

優點：本地範圍，易於使用道具自訂，不需要單獨的 CSS 檔案。
缺點：可能會增加大型專案的複雜性。

設定：
安裝 styled-components 並直接在元件檔案中使用它。

Button.js:

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

使用樣式元件，您可以在 JS 檔案中編寫實際的 CSS，使樣式保持接近元件。它非常適合創建基於道具的動態樣式。

最後的想法

每種方法都有自己的優點，因此請選擇適合您的專案和團隊的方法。快樂造型！ ？

如果您需要有關這些方法或其他範例的更多協助，請隨時與我們聯絡！

以上是比較 React 中的 CSS 樣式方法：透過程式碼範例讓選擇更容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！