React中添加CSS的三種方式

在React中，您可以通過以下三種方式添加CSS：

1、內(nèi)聯(lián)樣式：React允許您直接在組件的style屬性中編寫CSS樣式。

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return (
    <div style={{ color: 'red', fontSize: '20px' }}>Hello, World!</div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

在這個(gè)例子中，div元素的文本顏色被設(shè)置為紅色，字體大小被設(shè)置為20像素。

2、外部樣式表：您也可以在React組件中使用外部樣式表，您需要?jiǎng)?chuàng)建一個(gè)樣式表文件（例如App.css），然后在組件中導(dǎo)入并使用該樣式表。

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'; // 導(dǎo)入樣式表文件
function App() {
  return (
    <div className="app">Hello, World!</div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

在App.css文件中，您可以編寫如下樣式：

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

3、CSS Modules：CSS Modules是一種將CSS與JavaScript模塊化的方法，它允許您編寫可重用的CSS代碼，并在React組件中輕松導(dǎo)入和使用，要使用CSS Modules，您需要在項(xiàng)目配置中啟用它（在create-react-app項(xiàng)目中，可以通過react-app-rewired和customize-cra來實(shí)現(xiàn)），您可以按照以下步驟使用它：

創(chuàng)建一個(gè)樣式表文件（例如App.module.css），然后編寫樣式：

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

在React組件中導(dǎo)入并使用該樣式表：

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './App.module.css'; // 導(dǎo)入樣式表模塊
function App() {
  return (
    <div className={styles.app}>Hello, World!</div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

三種方式都可以幫助您在React中添加CSS樣式，您可以根據(jù)自己的需求選擇***適合的方式。