React CSS樣式設定的方式

更新於 2025/03/03發佈於 2025/03/03閱讀時間約 3 分鐘

在 React 中，有三種主要方式可以套用 CSS 來設計和美化應用的外觀。每種方式都有不同的適用場景，以下是詳細介紹：

我們想要以下的效果:

一樣，App.jsx的程式碼如下:

import Component from "./Component.jsx"

function App() {
  return (
    <>
      <Component />
    </>
  );
}

export default App

CSS樣式設定的三種方式分別為:

External

你會發現，在main.jsx中，有以下程式碼語句:

import './index.css'

而我們要做的事，其實就和之前我們寫一般CSS那樣。要注意的是，是className而不是classname。

Component.jsx程式碼

function Component() {
	return (
		<header className="container">
			<h1>Test</h1>
			<p>Hi, nice to meet you!!!!!!!</p>
		</header>
	);
}

export default Component

index.css 程式碼

.container {
  background-color: #23c9cf;
  padding: 20px;
}

Modules

將 CSS 文件模組化，每個組件引入自己的 CSS 文件，樣式會被限制在該組件內，避免全域污染。

Component.jsx程式碼

import styles from './Component.module.css'

function Component() {
	return (
		<header className={styles.container}>
			<h1>Test</h1>
			<p>Hi, nice to meet you!!!!!!!</p>
		</header>
	);
}

export default Component

Component.moudle.css 程式碼(請自行新增這一個檔案)

.container {
  background-color: #23c9cf;
  padding: 20px;
}

Inline

將 CSS 直接寫在 .jsx 文件中。

Component.jsx程式碼

function Component() {
	const styles = {
		backgroundColor: "#23c9cf", /* 注意這邊的寫法 */
	  padding: "20px",
	}
	return (
		<header style={styles}>
			<h1>Test</h1>
			<p>Hi, nice to meet you!!!!!!!</p>
		</header>
	);
}

export default Component