css怎么引入html

ss怎么引入html

在HTML中引入CSS的方法主要有四種：

1. 內聯方式：直接在HTML標簽中的style屬性中添加CSS，即采用行內樣式。例如：<p style="color:red;">這是紅色文字</p>。這種方式的優點是可以直接在HTML文件中看到效果，但缺點是不夠模塊化，不便于復用和維護。

2. 內嵌樣式：使用<style>標簽在HTML文檔頭部（<head>和<head>之間）定義CSS樣式。例如：

<head>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>這是紅色文字</p>

</body>

這種方式的優點是可以將CSS樣式與HTML內容分離，提高代碼可讀性，但同樣存在復用和維護的問題。

3. 鏈接式：使用<link>標簽引入外部CSS樣式表文件。具體操作步驟如下：新建一個HTML文件和一個CSS文件，將新建的CSS文件保存在一個文件夾中，回到HTML文件中，在<title><title>下方添加<link>標簽并設置其屬性為CSS文件的路徑，保存后便實現了引入外部CSS文件。這種方式的優點是可以實現代碼的復用和維護，但需要提前準備好CSS文件。

4. 導入式：使用@import命令導入外部CSS樣式表。例如：<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是，這里的路徑需要是正確的。這種方式可以在同一個HTML文件中引入多個CSS文件，但瀏覽器對@import的支持程度不同，可能會出現兼容性問題。

2024年選擇適合項目的CSS框架至關重要。這將為構建新的用戶界面（UI）組件所需的總體努力定下基調。目前，最重要的是更快地發布新功能，以保持客戶的滿意度。因此，你需要一個易于使用的CSS框架，它能夠提供現成的UI元素。

下面，我們來看看2024年值得嘗試的最佳CSS框架。

1、Bootstrap

在今天的數字時代，網頁設計和開發已經成為創造令人印象深刻在線體驗的關鍵。為了滿足這一需求，Bootstrap 應運而生，它是一款以移動為先的 CSS 框架，不僅能幫助你構建外觀優雅的響應式網頁界面，還大大簡化了開發過程。

Bootstrap 的核心在于其強大的柵格系統，這一系統使得開發者可以為各種屏幕尺寸創建靈活的布局。更重要的是，Bootstrap 提供了大量現成的組件，比如導航欄、卡片和模態框，這些都讓開發變得更加迅速和高效。

Bootstrap 的獨特之處

響應式柵格系統：這是 Bootstrap 的核心特性之一，允許網頁內容根據不同的屏幕尺寸自動調整布局，從而在手機、平板和桌面上都能提供良好的用戶體驗。
豐富的預制組件：Bootstrap 提供了大量的預制組件，如導航欄、卡片、模態框等，使得開發者可以輕松實現復雜的UI設計。
快速樣式調整的實用類：通過實用類，Bootstrap 使得頁面的樣式調整變得快速簡單，無需編寫大量的自定義CSS。
增強功能的JavaScript插件：Bootstrap 還提供了一系列JavaScript插件，進一步擴展了網頁的交互性和動態效果。
活躍的社區和豐富的文檔：Bootstrap 擁有一個活躍的開發者社區和詳盡的文檔，為使用者提供了強大的支持。

如何將 Bootstrap 與現代框架結合使用

如果你在使用 React 開發項目，可以輕松地將 React Bootstrap 庫安裝到你的項目中，通過這種方式，你可以在保持 React 的組件化開發模式的同時，享受 Bootstrap 提供的樣式和組件優勢。

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './bootstrap.css';

export function Bootstrap() {
  return (
    <div className="button">
      {['Primary', 'success', 'danger'].map((variant) => (
        <DropdownButton
          as={ButtonGroup}
          key={variant}
          id={dropdown-variants-${variant}}
          variant={variant.toLowerCase()}
          title={variant}
          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
          <Dropdown.Item eventKey="3" active>
            Active Item
          </Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
        </DropdownButton>
      ))}
      <br />
      <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

2、Tailwind CSS

Tailwind CSS 以其獨樹一幟的“工具優先”設計理念，在前端開發社區中引起了廣泛關注。它與傳統的 CSS 框架不同，不提供預設樣式的組件，而是通過提供大量的低級實用類（utility classes），讓開發者能夠構建出完全定制的設計。這種方法提供了前所未有的靈活性和可擴展性，使得開發者可以精準控制網頁的每一個細節。

Tailwind CSS 的獨特特點

工具優先的設計方式：Tailwind 的核心思想是通過實用類直接在 HTML 中應用樣式，極大地提高了開發效率和靈活性。
高度可定制：通過配置文件，開發者可以自定義 Tailwind 的主題、顏色、間距等，以適應項目的具體需求。
沒有預構建的組件：與其它框架不同，Tailwind 不提供預構建的組件。這意味著所有的樣式都是由開發者從頭開始構建的，確保了設計的獨特性。
響應式設計：Tailwind 提供了響應式設計的支持，通過斷點（breakpoints）可以輕松實現不同屏幕尺寸下的樣式適配。
與 PurgeCSS 的集成：通過集成 PurgeCSS，Tailwind 能夠在生產環境下自動移除未使用的 CSS，優化項目的加載速度。
JIT（即時編譯）模式：Tailwind 的 JIT 模式使得開發過程中的樣式更改能夠即時反映，進一步提升開發效率。

如何集成 Tailwind CSS

集成 Tailwind CSS 到項目中并非一蹴而就，首先需要設置 Tailwind 編譯器。通過在項目的配置文件中指定要處理的內容和自定義主題，然后通過插件來擴展功能，你可以開始使用 Tailwind 提供的實用類來編寫 CSS。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

以下是相關的使用示例

export function Tailwind() {
  const ContactTextArea = ({
    row,
    placeholder,
    name,
    defaultValue,
  }: {
    row: number;
    placeholder: string;
    name: string;
    defaultValue: string;
  }) => {
    return (
      <>
        <div className="mb-6">
          <textarea
            rows={row}
            placeholder={placeholder}
            name={name}
            className="w-full resize-none rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
            defaultValue={defaultValue}
          />
        </div>
      </>
    );
  };

const ContactInputBox = ({
    type,
    placeholder,
    name,
  }: {
    type: string;
    placeholder: string;
    name: string;
  }) => {
    return (
      <>
        <div className="mb-6">
          <input
            type={type}
            placeholder={placeholder}
            name={name}
            className="w-full rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
          />
        </div>
      </>
    );
  };
  return (
    <section className="relative z-10 overflow-hidden bg-white py-20 dark:bg-dark lg:py-[120px]">
      <div className="w-full px-4 lg:w-1/2 xl:w-5/12">
        <div className="relative rounded-lg bg-white p-8 shadow-lg dark:bg-dark-2 sm:p-12">
          <form>
            <ContactInputBox type="text" name="name" placeholder="Your Name" />
            <ContactInputBox
              type="text"
              name="email"
              placeholder="Your Email"
            />
            <ContactInputBox
              type="text"
              name="phone"
              placeholder="Your Phone"
            />
            <ContactTextArea
              row={6}
              placeholder="Your Message"
              name="details"
              defaultValue=""
            />
            <div>
              <button
                type="submit"
                className="w-full rounded border border-primary bg-primary p-3 text-white transition hover:bg-opacity-90"
                Send Message
              </button>
            </div>
          </form>
          <div />
        </div>
      </div>
    </section>
  );
}

3、Foundation

Foundation 是一款開源的、響應式的前端框架，它極大地簡化了創建在任何設備上都能完美運行的響應式網站、應用程序和電子郵件的過程。由于其出色的靈活性和易用性，Foundation 已被包括 Facebook、eBay、Mozilla、Adobe 乃至 Disney 在內的許多公司采用于他們的項目中。

Foundation 提供了一個強大而靈活的響應式柵格系統，并且包括了許多方便的選項、模態框（modals）、排版（typography）、導航組件以及表單元素，設計師可以快速將這些元素集成到他們的產品中。此外，Foundation 的模塊化架構意味著你可以根據需要，使用它的部分或全部功能。

Foundation 的獨特特性

靈活的響應式柵格系統：Foundation 的柵格系統提供了豐富的布局選項，使得創建響應式設計變得簡單高效。
模塊化架構：這允許開發者自定義所需的功能，確保了框架的靈活性和擴展性。
Sass 預處理器：Foundation 使用 Sass 預處理器進行樣式的編寫，進一步增強了樣式定義的靈活性和可維護性。
內建組件和響應式導航：框架提供了一系列預建的組件和響應式導航，加速了開發流程并提高了用戶體驗。
Flexbox 和塊級網格支持：這些現代布局技術的支持使得創建復雜的布局結構變得更為簡單。
可訪問性特性：Foundation 在設計時考慮了可訪問性，幫助開發者創建符合 WCAG 標準的網站。

如何在項目中集成 Foundation

通過如下示例代碼，可以看到如何在 React 項目中使用 Foundation：

import { Menu, MenuItem } from 'react-foundation';

export function Foundation() {
  return (
   <Menu style={{ marginLeft: '34px' }}>
     <MenuItem>
       <a href="/">Home</a>
     </MenuItem>
     <MenuItem>
       <a href="/">Blog</a>
     </MenuItem>
     <MenuItem>
       <a href="/">About</a>
     </MenuItem>
     <MenuItem>
      <a href="/">Contact</a>
     </MenuItem>
   </Menu>
  );
}

這個例子展示了如何使用 Foundation 的 Menu 和 MenuItem 組件來創建一個簡單的導航菜單。這種集成方式使得在保持 React 組件化開發模式的同時，還能享受 Foundation 提供的樣式和組件優勢。

4. Bulma

Bulma 是一個輕量級的 CSS 框架，以其簡單性、響應性和定制選項著稱。它與其他 UI 框架的不同之處在于，Bulma 是基于 Flexbox 構建的，Flexbox 是一種 CSS 布局模型，能夠根據容器的寬度調整頁面元素的寬度，這使得創建網格等任務變得非常簡單，并且是框架輕量化的原因之一。

Bulma 的主要特點

基于 Flexbox 的現代 CSS 框架：利用 Flexbox，Bulma 為開發者提供了一種更靈活、簡潔的方式來創建布局，無需復雜的布局計算。
易用且直觀的語法：Bulma 的類名清晰直觀，使得即使是 CSS 新手也能快速上手。
無 JavaScript 依賴：Bulma 完全由 CSS 構成，這意味著你可以在不添加任何 JavaScript 的情況下使用它，減少了前端項目的復雜度。
內建的響應式設計修飾符：Bulma 提供了一系列修飾符用于創建響應式設計，使得適應不同屏幕尺寸的布局變得簡單。
組件化：如導航欄、模態框、標簽頁等，Bulma 提供了豐富的組件庫，方便開發者快速實現常見的 UI 功能。
通過 Sass 可擴展：Bulma 允許通過 Sass 進行定制，開發者可以根據項目需求調整顏色、間距等參數。

如何在項目中集成 Bulma

將 Bulma 集成到項目中相當簡單，只需導入 Bulma 的 CSS 文件即可開始使用它提供的各種樣式和組件。以下是一個使用 Bulma 創建分頁導航的示例：

import 'bulma/css/bulma.min.css';

export function Bulma() {
  return (
    <div>
      <nav className="pagination" role="navigation" aria-label="pagination">
        <a href="/" className="pagination-previous">
          Previous
        </a>
        <a href="/" className="pagination-next">
          Next Page
        </a>
        <ul className="pagination-list">
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 1">
              1
            </a>
          </li>
          <li>
            <span className="pagination-ellipsis">…</span>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 45">
              45
            </a>
          </li>
          <li>
            <a
              href="/"
              className="pagination-link is-current"
              aria-label="Page 46"
              aria-current="page"
              46
            </a>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 47">
              47
            </a>
          </li>
          <li>
            <span className="pagination-ellipsis">…</span>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 86">
              86
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

這個例子展示了如何利用 Bulma 的分頁組件來創建一個簡潔美觀的分頁導航。通過使用 Bulma，開發者可以節省大量的時間來設計和編寫 CSS，專注于實現更好的用戶體驗和界面設計。

5. UIKit

UIKit 是一個開源的框架，專門用于構建 Web 應用程序的用戶界面。它與其他 UI 框架在結構和設計哲學上有所不同。不同于其他遵循傳統 BEM 方法論的框架，UIKit 采用了基于組件的結構。這種方式為組件的靈活性和可重用性提供了更大的空間，可以顯著減少構建復雜用戶界面所需的代碼量。

UIKit 的主要特性

模塊化和輕量級框架：UIKit 的設計注重于提供一個輕量級的解決方案，便于快速開發和部署。
響應式柵格系統：UIKit 提供了一個靈活的柵格系統，使得在不同設備上的布局變得簡單和一致。
預設計的組件：UIKit 包含了大量預設計的組件，如導航欄、滑塊、模態框等，簡化了開發流程。
基于 Flexbox 的布局：UIKit 利用 Flexbox 布局，提供了一種更靈活的方式來創建復雜的布局結構。
動畫和過渡效果：UIKit 包含了豐富的動畫和過渡效果，可以輕松地為界面添加視覺吸引力。
可定制和可主題化：UIKit 提供了廣泛的定制選項，使得開發者可以根據自己的需求調整樣式和功能。

如何在項目中集成 UIKit

將 UIKit 集成到項目中非常直接，僅需導入 UIKit 的 CSS 文件即可開始使用其提供的樣式和組件。以下是一個使用 UIKit 創建按鈕的示例：

import 'uikit/dist/css/uikit.min.css';

export function Uikit() {
  return (
    <div className="uk-flex uk-flex-center uk-margin-top">
      <button
        type="button"
        className="uk-button uk-button-default uk-margin-left"
        onClick={() => alert('Cancel clicked!')}
      >
        Cancel
      </button>
    </div>
  );
}

這個例子演示了如何利用 UIKit 的按鈕（Button）組件來創建一個簡單的按鈕，并使用 Flexbox 實現居中布局。通過 UIKit，開發者可以享受到高度靈活和易用的界面構建體驗，同時也能保持代碼的整潔和模塊化。

總結

選擇合適的 CSS 框架對于項目的成功至關重要。每個框架都有其獨特的特點、優勢和可能的限制，因此了解如何根據項目的具體需求挑選合適的框架是一項重要的技能。除了我們討論的 Bootstrap、Tailwind CSS、Foundation、Bulma 和 UIKit 外，市面上還有許多其他的 CSS 框架，每個都有可能成為你項目的理想選擇。

創建概念驗證

創建概念驗證（Proof-of-Concept，PoC）是評估 CSS 框架是否適合你項目的一個極好方法。通過這種方式，你可以實際操作并體驗每個框架的學習曲線、靈活性、易用性以及它們如何適應你的項目需求。以下是一些建議，幫助你通過創建概念驗證來選擇正確的 CSS 框架：

明確項目需求：在開始之前，清晰地定義你的項目需求，包括預期的功能、設計美學、響應式設計的要求等。
研究框架的特性：深入了解每個框架的核心特性、設計理念和社區支持情況。
評估學習曲線：嘗試了解開始使用框架并達到一定熟練度所需的時間和努力，確保團隊能夠快速上手。
考慮擴展性和維護性：選擇那些提供良好文檔、定期更新和社區支持的框架，以確保項目的長期可維護性。
實踐中測試：為每個框架創建小型的概念驗證項目，實際操作它們來構建一些簡單的布局或組件。這將幫助你直觀地感受到使用框架的便利性和可能的挑戰。
性能考量：測試每個框架生成的 CSS 的大小和加載時間，確保它們不會對最終用戶的體驗產生負面影響。
社區和資源：考慮框架的社區活躍度和可用資源。一個活躍的社區和豐富的學習資源可以在你遇到問題時提供幫助。

通過這種綜合評估方法，你可以更全面地理解每個框架如何適應你的項目需求，從而做出明智的選擇。記住，最適合項目的框架不一定是最流行或最新的，而是最能滿足你項目特定需求的那一個。分享你的概念驗證經驗和框架選擇理由，不僅能幫助團隊成員理解決策過程，也能為面臨相似選擇的其他開發者提供參考。

React以其聲明式編程范式和組件化架構，成為了構建用戶界面的首選技術之一。然而，隨著項目規模的擴大和設計需求的多樣化，如何高效地管理 CSS 樣式成為了每個React開發者都需要面對的挑戰。

本文將從一下三個方面進行介紹，探討如何在 React 中應用和管理樣式，包括內聯樣式、CSS 類、CSS Modules 和 CSS-in-JS 技術，提升界面美觀和開發效率。

常見的樣式方案

在 React 中，組件樣式指的是如何為每個獨立的組件定義和管理視覺表現。組件樣式的設計和應用是 React 開發中的關鍵部分，它決定了應用的外觀和用戶體驗。

內聯樣式 (Inline Styles)

在 React 中，內聯樣式是一種直接在元素上定義 CSS 樣式的方式，類似于在 HTML 中使用 style 屬性。不同的是，在 React 中，內聯樣式是通過一個 JavaScript 對象來定義的，而不是傳統的 CSS 字符串。這使得內聯樣式在 React 中具有更強的動態性和靈活性。

基本語法

在 React 中，內聯樣式通過元素的 style 屬性來設置，該屬性接受一個 JavaScript 對象。對象的鍵是 CSS 屬性名（使用駝峰命名法），值是對應的樣式值；如下：

import React from 'react';

function InlineStyles() {
    const divStyle = {
        color: 'blue',
        backgroundColor: 'lightgray',
        padding: '10px',
    };

    return <div style={divStyle}>Hello, World!</div>;
}

export default InlineStyles;

在這個例子中，divStyle 是一個包含樣式屬性的 JavaScript 對象，并通過 style 屬性應用到 div 元素上。

效果如下：

樣式屬性的命名

在 React 的內聯樣式中，CSS 屬性名使用駝峰命名法（camelCase），而不是傳統的 CSS 短橫命名法（kebab-case）。例如：

background-color 在 React 中寫成 backgroundColor
font-size 寫成 fontSize
margin-top 寫成 marginTop

動態樣式

內聯樣式可以非常方便地實現動態樣式。你可以根據組件的狀態或屬性來動態地改變樣式。

import React, { useState } from 'react';

function DynamicStyles() {
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(!isActive);
    };

    const divStyle = {
        color: isActive ? 'red' : 'blue',
        backgroundColor: 'lightgray',
        padding: '10px',
        cursor: 'pointer',
        userSelect: 'none',
    };

    return (
        <div style={divStyle} onClick={handleClick}>
            Click me to change color!
        </div>
    );
}

export default DynamicStyles;

在這個例子中，當點擊 div 元素時會切換其文本顏色。效果圖如下：

樣式合并

React允許將多個樣式對象合并為一個，這在需要應用多個條件樣式時非常有用：

const baseStyle = { padding: '10px', margin: '5px' };
const activeStyle = { backgroundColor: 'green' };

// 合并樣式
const finalStyle = { ...baseStyle, ...activeStyle };

// ...
<div style={finalStyle} />

內聯樣式的優缺點:

優點:

局部作用域：內聯樣式只作用于當前的元素，不會影響其他元素，避免了樣式沖突。
動態性：可以很方便地根據組件的狀態或屬性來動態設置樣式。
簡潔：對于簡單的樣式，可以減少代碼量和文件數量。

缺點:

可維護性：當樣式變得復雜時，內聯樣式會使得組件代碼變得難以維護。
復用性差：內聯樣式無法復用，相同的樣式需要在多個地方重復定義。
缺少偽類和偽元素支持：內聯樣式無法直接使用 CSS 偽類和偽元素（如 :hover, ::after）。
性能差：聯樣式對象包含大量的屬性或者嵌套的對象，這可能會使得樣式對象的創建和合并更加耗時。

CSS 類 (CSS Classes)

與內聯樣式相比，使用 CSS 類樣式可以使代碼更清晰、可維護性更高。

使用 CSS 類樣式的基本方法

創建 CSS 文件
首先，你需要創建一個 CSS 文件，并在其中定義你的 CSS 類。例如，創建一個 common.css 文件：

/* common.css */
.container {
    color: blue;
    background-color: lightgray;
    padding: 10px;
}

.active {
    color: red;
}

在 React 組件中引入 CSS 文件在你的 React 組件中，使用 import 語句引入剛剛創建的 CSS 文件：

import { useState } from 'react';
import '../assets/styles/common.css';

function ClassStyles() {
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(!isActive);
    };

    return (
        <div
            className={`container ${isActive ? 'active' : ''}`}
            onClick={handleClick}>
            Click me to change color!
        </div>
    );
}

export default ClassStyles;

在這個示例中，我們使用模板字符串（template literals）來動態添加或移除 CSS 類。效果如下：

動態添加或移除 CSS 類

可以使用條件渲染的方法動態添加或移除 CSS 類。例如，使用三元運算符或條件運算符：

<div
    className={`container ${isActive ? 'active' : ''}`}
    onClick={handleClick}>
    Click me to change color!
</div>

或者，使用 classnames、clsx 庫來處理復雜的類名邏輯，下面用 classnames 做個演示：

import { useState } from 'react';
import classNames from 'classnames';

function ClassnamesStyles() {
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(!isActive);
    };

    return (
        <div
            className={classNames('container', { active: isActive })}
            onClick={handleClick}>
            Click me to change color!
        </div>
    );
}

export default ClassnamesStyles;

然后在 App.jsx 中引入 ClassnamesStyles 組件；在這個示例中，classnames 庫使得根據條件判斷類名的處理更加簡潔和易讀。效果如下：

CSS Modules

為了避免全局樣式沖突，React 推薦使用 CSS 模塊（CSS Modules），它允許你將 CSS 類名限定在本地作用域內。

創建 CSS 模塊文件首先，創建一個 CSS 模塊文件，例如 page.module.css：

/* page.module.css */
.container {
    color: blue;
    background-color: lightgray;
    padding: 10px;
}

.active {
    color: red;
}

在 React 組件中引入和使用 CSS 模塊

import { useState } from 'react';
import styles from '../assets/styles/page.module.css';

function CssModuleStyles() {
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(!isActive);
    };

    return (
        <div
            className={`${styles.container} ${isActive ? styles.active : ''}`}
            onClick={handleClick}>
            Click me to change color!
        </div>
    );
}

export default CssModuleStyles;

在這個示例中，CSS 類名是通過 styles 對象來引用的，這樣可以確保類名在本地作用域內不發生沖突。

優缺點對比

優點:

可維護性高：樣式定義集中在一個地方，使得代碼更清晰易讀。
復用性好：相同的樣式可以在多個組件中復用。
避免沖突：使用 CSS 模塊可以避免全局命名沖突。

缺點:

動態性較差：相比于內聯樣式，動態設置樣式略顯不便。
額外的構建步驟：需要引入和配置 CSS 文件，增加了項目的構建復雜度。

Styled Components 和 CSS-in-JS

在 React 中，Styled Components 和 CSS-in-JS 是用于管理和應用樣式的現代解決方案。它們旨在使樣式更加模塊化、可復用和動態化。

Styled Components

Styled Components 是一個流行的 CSS-in-JS 庫，它使用 ES6 的模板字符串語法來定義組件級別的樣式。通過使用 Styled Components，你可以將組件的樣式與其邏輯緊密結合，使得樣式更加模塊化和可維護。

安裝 styled-components 庫

$ npm install styled-components

使用示例

以下是如何在 React 中使用 Styled Components：

import { useState } from 'react';
import styled from 'styled-components';

// 定義一個帶有樣式的容器組件
const Container = styled.div`
    /* 根據 props.isActive 設置顏色 */
    color: ${props => (props.isActive ? 'red' : 'blue')};
    background-color: lightgray;
    padding: 10px;
    cursor: pointer;
    transition: color 0.3s;
`;

const Button = styled.button`
    /* 根據 props.primary 設置按鈕樣式 */
    background: ${props => (props.$primary ? '#BF4F74' : 'white')};
    color: ${props => (props.$primary ? 'white' : '#BF4F74')};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid #bf4f74;
    border-radius: 3px;
`;

function StyledComponentsStyles() {
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(!isActive);
    };

    return (
        <main>
            <Container isActive={isActive}>Click me to change color!</Container>
            <Button onClick={handleClick} $primary={isActive}>
                Primary
            </Button>
        </main>
    );
}

export default StyledComponentsStyles;

效果如下：

CSS-in-JS

CSS-in-JS 是一種將 CSS 樣式直接寫在 JavaScript 文件中的技術。Styled Components 是 CSS-in-JS 的實現之一，但還有其他庫和方法可以實現 CSS-in-JS，例如 emotion、styled-jsx 等。

優點

模塊化：每個組件的樣式都與組件本身緊密結合，避免了樣式沖突。
動態樣式：可以方便地根據組件的狀態或屬性來動態調整樣式。
可維護性：將組件的樣式和邏輯放在一起，使得代碼更加內聚和可維護。
自動前綴：自動添加瀏覽器前綴，使得樣式兼容更多瀏覽器。

缺點

性能：在某些情況下，CSS-in-JS 可能會對性能產生影響，因為樣式是在運行時生成的。
學習曲線：需要學習新的庫和語法，可能增加項目的復雜性。

其他 CSS-in-JS 庫

Emotion Emotion 是另一個流行的 CSS-in-JS 庫，具有強大的動態樣式和高性能的特點。

安裝 Emotion

$ npm install @emotion/react

使用示例

在使用 emotion 方案的 jsx 文件開頭加入一行 /** @jsxImportSource @emotion/react **/ 的 JSX Pragma（編譯指示），告訴 JS 編譯器使用 @emotion/react 包來替代 React 原生的jsx 運行時。

/* @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';

const color = 'white';

function EmotionStyles() {
    return (
        <div
            css={css`
                padding: 32px;
                font-size: 16px;
                background-color: hotpink;
                font-size: 24px;
                border-radius: 4px;
                &:hover {
                    color: ${color};
                }
            `}>
            Hover to change color.
        </div>
    );
}

export default EmotionStyles;

效果如下：

emotion 也支持了 style-components 的方案，不過要安裝一下依賴：npm i @emotion/styled，使用示例如下：

/* @jsxImportSource @emotion/react */
import { useState } from 'react';
import styled from '@emotion/styled';

const Container = styled.div`
    color: ${props => (props.isActive ? 'red' : 'blue')};
    background-color: lightgray;
    padding: 10px;
    cursor: pointer;
    transition: color 0.3s;
`;

function EmotionStyledStyles() {
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(!isActive);
    };

    return (
        <Container isActive={isActive} onClick={handleClick}>
            Click me to change color!
        </Container>
    );
}

export default EmotionStyledStyles;

效果如下：

Styled Components 和 CSS-in-JS 是現代 React 開發中非常流行的樣式解決方案。它們提供了模塊化、動態化和高可維護性的樣式管理方式。根據項目需求選擇合適的方案，可以顯著提高開發效率和代碼質量。

總結

在 React 項目中，有許多不同的樣式管理工具和庫可供選擇。以下是一些常見的選擇：

CSS-in-JS：Styled Components, Emotion
Utility-First CSS 框架：Tailwind CSS、unocss
組件庫：Bootstrap (react-bootstrap), Ant Design, Material-UI等
CSS 預處理器：Sass、less
CSS 模塊：CSS Modules

選擇合適的樣式管理工具取決于你的項目需求、團隊的熟悉度以及具體的使用場景。

原文轉自：https://juejin.cn/post/7384992844191154214

在線咨詢

上一篇：頁面排版很難嗎？一起來學Markdown吧！04使用Typora排版（二）
下一篇：CSS超炫加載動畫設計、實現與實例講解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css怎么引入html

1、Bootstrap

2、Tailwind CSS

3、Foundation

4. Bulma

5. UIKit

總結

常見的樣式方案

內聯樣式 (Inline Styles)

基本語法

樣式屬性的命名

動態樣式

樣式合并

CSS 類 (CSS Classes)

使用 CSS 類樣式的基本方法

動態添加或移除 CSS 類

CSS Modules

Styled Components 和 CSS-in-JS

Styled Components

CSS-in-JS

總結

您的項目需求