本文目錄導讀：

1. 內聯(lián)樣式
2. 使用 CSS Modules
3. 使用 CSS-in-JS 庫

React 中引入 CSS 的多種方式

在 React 項目中，引入 CSS 的方式有多種，下面介紹幾種常見的方法。

內聯(lián)樣式

React 支持直接在組件中使用內聯(lián)樣式，這種方式簡單直接，適用于簡單的樣式需求。

import React from 'react';
const MyComponent = () => {
  return (
    <div style={{ color: 'red', fontSize: '20px' }}>Hello World!</div>
  );
};

使用 CSS Modules

CSS Modules 是一種將 CSS 樣式局部化的方式，可以避免全局樣式沖突，在 React 中使用 CSS Modules，需要在項目配置中啟用 CSS Modules 功能，在項目中的 CSS 文件中定義樣式，通過類名的方式應用到組件上。

import React from 'react';
import styles from './MyComponent.module.css'; // 引入 CSS Modules 樣式文件
const MyComponent = () => {
  return <div className={styles.myComponent}>Hello World!</div>; // 使用類名應用樣式
};

使用 CSS-in-JS 庫

除了內聯(lián)樣式和 CSS Modules，還可以使用 CSS-in-JS 庫來管理 React 組件的樣式，這些庫通常提供了一些額外的功能，如樣式封裝、主題化等，常見的 CSS-in-JS 庫有 styled-components、emotion 等，使用這些庫可以方便地定義和管理組件的樣式，使用 styled-components：

import React from 'react';
import styled from 'styled-components'; // 引入 styled-components 庫
const StyledDiv = styled.div` // 定義帶樣式的 div 組件
  color: red;
  font-size: 20px;
`;
const MyComponent = () => {
  return <StyledDiv>Hello World!</StyledDiv>; // 使用定義的帶樣式 div 組件
};

四、使用全局 CSS 文件和 CSS 預處理器

在項目中使用全局 CSS 文件，可以統(tǒng)一管理項目的樣式，可以結合 CSS 預處理器（如 Less、Sass 等）來編寫更復雜的樣式，在 React 項目中配置好 Webpack 或其他構建工具后，可以直接引入全局 CSS 文件和 CSS 預處理器。

在App.js 中引入全局 CSS 文件：

import './assets/css/global.css'; // 引入全局 CSS 文件
``global.css 文件內容：``css{color: #ff0;}`````以上就是 React 中引入 CSS 的幾種常見方式，根據項目的需求和規(guī)模，可以選擇合適的方式來管理項目的樣式。