使用 CSS 為 React 樣式
有許多方法可以為 React 新增 CSS 樣式，本教程將重點介紹三種常見的方法：
- 內聯樣式
- CSS 樣式表
- CSS Modules
內聯樣式
要使用內聯 style 屬性為元素設定樣式，其值必須是一個 JavaScript 物件。
示例
插入一個包含樣式資訊的物件
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
注意: 在 JSX 中，JavaScript 表示式寫在大括號 `{}` 中，因為 JavaScript 物件也使用大括號，所以上面的示例中的樣式寫在了兩層大括號 `{{}}` 中。
駝峰命名屬性
由於內聯 CSS 寫在 JavaScript 物件中，像 `background-color` 這樣的屬性必須使用駝峰式命名法。
示例
使用 `backgroundColor` 代替 `background-color`。
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript 物件
您也可以建立一個包含樣式資訊的物件，並在 style 屬性中引用它。
示例
建立一個名為 `myStyle` 的樣式物件
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
CSS 樣式表
您可以在單獨的檔案中編寫 CSS 樣式，只需將檔案儲存為 `.css` 副檔名，然後在您的應用程式中匯入它。
App.css
建立一個名為 "App.css" 的新檔案，並在其中插入一些 CSS 程式碼。
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
注意: 您可以為檔案命名，但請記住正確的副檔名。
在您的應用程式中匯入樣式表
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
CSS Modules
嚮應用程式新增樣式的另一種方法是使用 CSS Modules。
CSS Modules 對於放置在單獨檔案中的元件非常方便。
模組內的 CSS 僅對匯入它的元件可用，您無需擔心名稱衝突。
使用 `.module.css` 副檔名建立 CSS 模組，例如：`my-style.module.css`。
建立一個名為 "my-style.module.css" 的新檔案，並在其中插入一些 CSS 程式碼。
my-style.module.css
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
在您的元件中匯入樣式表
Car.js
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
在您的應用程式中匯入元件
index.js
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
