本文目錄導讀：

1. 內聯(lián)樣式
2. 使用樣式表（CSS文件）
3. 使用CSS模塊

如何在React中引入CSS

在React中引入CSS有多種方法，包括內聯(lián)樣式、樣式表以及CSS模塊等，下面將詳細介紹如何在React項目中合理地引入和應用CSS樣式。

內聯(lián)樣式

內聯(lián)樣式是直接在React組件的JSX代碼中定義樣式的方式，這種方法簡單直接，適用于快速開發(fā)和調試，但內聯(lián)樣式不具備模塊化特性，不利于大型項目的維護，示例如下：

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

使用樣式表（CSS文件）

對于大型項目，我們通常會使用CSS文件來管理樣式，在React中，可以通過import語句將CSS文件引入到組件中，示例如下：

假設你有一個名為styles.css的CSS文件，內容如下：

.myStyle {
  color: red;
  font-size: 20px;
}

然后在React組件中引入這個CSS文件：

import React from 'react';
import './styles.css'; // 引入CSS文件
function MyComponent() {
  return <div className="myStyle">Hello World!</div>; // 使用CSS類名
}

使用CSS模塊

CSS模塊是一種將CSS與組件緊密結合的方式，每個模塊化的CSS文件對應一個***的類名，避免了全局類名的沖突，示例如下：

假設你有一個名為styles.module.css的CSS模塊文件，內容如下：

.myStyle {
  color: red; /* :root 下的類名 */
} /* 自動生成***的類名 */

然后在React組件中引入這個CSS模塊文件：

import React from 'react';
import styles from './styles.module.css'; // 引入CSS模塊文件，得到自動生成的類名對象styles對象，注意這里使用的是默認導出語法，如果你的文件名是styles.css而不是styles.module.css，則需要使用importas styles的形式來導入，否則，你的樣式類名會被默認導出為一個對象，而不是直接作為字符串導出，這可能會導致你在使用這些樣式類名時遇到問題，在使用CSS模塊時，一定要注意文件名和導入方式的匹配，否則，你的樣式類名將無法正確應用在你的組件上。 */ 然后在React組件中使用這個自動生成的類名 return <div className={styles.myStyle}>Hello World!</div>; // 使用自動生成的類名 } ``` 四、使用CSS預處理器 在大型項目中，我們通常會使用Sass、Less等CSS預處理器來增強CSS的功能，在React中，可以使用相應的加載器（如sass-loader）來引入預處理器編寫的樣式。 五、在React中引入CSS有多種方式，可以根據項目的規(guī)模和需求選擇合適的方式，對于小型項目或者快速開發(fā)，可以使用內聯(lián)樣式；對于大型項目或者需要模塊化管理的項目，可以使用CSS文件或者CSS模塊；對于需要增強功能或者寫復雜樣式的項目，可以使用CSS預處理器，無論哪種方式，都要注意代碼的整潔和可維護性。