本文目錄導(dǎo)讀：

1. 內(nèi)聯(lián)樣式
2. 使用 CSS Modules
3. 使用 CSS-in-JS 庫
4. 使用全局樣式表

React 中 CSS 的應(yīng)用與管理

React 作為前端開發(fā)的熱門框架，對于如何引用和管理 CSS 有著其獨(dú)特的方式，本文將介紹在 React 項(xiàng)目中如何有效地應(yīng)用 CSS。

內(nèi)聯(lián)樣式

React 支持在 JSX 中直接定義內(nèi)聯(lián)樣式，這種方式簡單直接，適用于快速開發(fā)和樣式調(diào)整。

<div style={{ color: 'red', fontSize: '20px' }}>這是一段文本</div>

使用 CSS Modules

CSS Modules 是一種將 CSS 與組件緊密結(jié)合的方式，每個(gè)模塊擁有獨(dú)立的 CSS 樣式，避免了全局樣式?jīng)_突，在創(chuàng)建組件時(shí)，可以通過 import 語句引入相應(yīng)的 CSS 模塊。

import styles from './MyComponent.module.css';
function MyComponent() {
  return <div className={styles.myStyle}>這是一段文本</div>;
}

使用 CSS-in-JS 庫

除了 CSS Modules，還有許多 CSS-in-JS 庫，如 styled-components、emotion 等，這些庫允許在 JavaScript 中編寫 CSS，并將其與組件緊密結(jié)合，這種方式提供了更高的靈活性和動(dòng)態(tài)性，適用于大型項(xiàng)目和復(fù)雜樣式需求。

使用全局樣式表

對于小型項(xiàng)目或簡單需求，可以在 public 目錄下創(chuàng)建全局樣式表，并在 HTML 文件中引入，React 會(huì)自動(dòng)加載這些樣式，應(yīng)用于整個(gè)項(xiàng)目，但這種方式可能導(dǎo)致樣式?jīng)_突，需謹(jǐn)慎使用。

在 React 中引用 CSS 有多種方式，可根據(jù)項(xiàng)目需求和開發(fā)習(xí)慣選擇合適的方式，內(nèi)聯(lián)樣式簡單直接，適用于快速開發(fā)和調(diào)整；CSS Modules 和 CSS-in-JS 庫可解決樣式?jīng)_突問題，適用于大型項(xiàng)目和復(fù)雜樣式需求；全局樣式表適用于小型項(xiàng)目和簡單需求，但需注意樣式?jīng)_突問題，在實(shí)際開發(fā)中，可結(jié)合多種方式來優(yōu)化項(xiàng)目結(jié)構(gòu)和開發(fā)效率。