在React中，我們可以使用多種方式來處理組件中的CSS。以下是幾種常見的方法：

1. 使用普通的CSS文件
我們可以將CSS文件導入到React組件中，就像在普通的HTML文件中一樣。

//style.css
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
//Component.jsx
import React from "react";
import "./style.css";
function Component() {
return (
<div className="container">
<p>This is some content inside a container.</p>
</div>
);
}

2. 使用內聯樣式
我們可以使用內聯樣式來直接在組件中定義CSS樣式。

function Component() {
const containerStyle = {
width: "100%",
maxWidth: "1200px",
margin: "0 auto"
};
const contentStyle = {
color: "red",
fontSize: "1.2rem"
};
return (
<div style={containerStyle}>
<p style={contentStyle}>This is some content inside a container.</p>
</div>
);
}

3. 使用CSS模塊
CSS模塊允許我們為React組件分配獨特的命名空間，這意味著同樣的類名將不會在全局范圍內沖突。

//Component.module.css
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
//Component.jsx
import React from "react";
import styles from "./Component.module.css";
function Component() {
return (
<div className={styles.container}>
<p>This is some content inside a container.</p>
</div>
);
}

總結：

React提供了多種方法來處理CSS，我們可以根據特定的需求來選擇合適的方式。使用普通CSS文件是最簡單的方法，但是使用內聯樣式和CSS模塊可以提供更好的可重用性和代碼維護性。