前幾天我們用JSX、Hook以及JavaScript的技巧做了一個todolist的雛型，可以增加、刪除項目。今天稍微轉換個方向，講一下要怎麼在JSX中使用使用CSS樣式。

方法一：inline CSS

之前在介紹JSX時有說過，由於JSX仍然是JavaScript，如果要將使用inline style的話，要把css用object的形式寫在JSX element中。例如昨天寫的margin-left樣式：

<li key={id} id={id}><span>{input}</span><a style={{marginLeft: "1.5rem"}} onClick={deleteHandler}>delete</a></li>

要注意，寫inline css時，一定要用駝峰寫法，不然瀏覽器會報錯，複製別處的code時要小心。

方法二：定義變數

跟方法一類似，不過如果今天需要大量的樣式，那inline style就很不方便，因此可以把它獨立出來，先將樣式寫成物件，賦值給變數，再放入JSX element中。

const contentStyle = {
	fontSize: “1.5rem”,
	color: “brown”,
	padding: “1rem 1.5rem”,
	margin: “1rem”,
}

const btn = <button style={contentStyle}>我是按鈕</button>

方法三：外部引入

如果是比較小量的css可以使用前兩種寫法，但是如果樣式很大量的話，就不得不使用外部引入了。基本上，這個方法也是目前絕大多數開發者使用css的方法，可以正常的寫css code，不用轉換成駝峰寫法，也可以保持程式碼的易讀性。
這個方法就像以往在寫HTML一般，在外部寫一個.css檔案，並把他引入到程式碼之中。但跟以往不同，不是用link標籤引入到header中，而是import到要render的檔案中。

// all.css
.btn{
	font-size: 1.5rem;
	padding: 1rem 1.5rem;
	color: brown;
	margin: 1rem
}

// App.js
import React from “react”;

const App = () => {
	return (<button className=”btn”>我是按鈕</button>)
}

export default App; 

// index.js
import React from “react”;
import ReactDOM from “react-dom”;
import App from “./App.js”;
import “./all.css”;

const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(
	<div>
		<App/>
	</div>
)

方法三在css的使用上好用很多，不需要在寫component時還要塞一堆樣式的object到程式碼中，非常方便！這個做法也可以拿來引用諸如bootstrap 5等css library，讓寫樣式更加迅速。
說到bootstrap 5，其實React有一個結合了bootstrap及React的特性，讓使用者更好使用bootstrap樣式的套件，叫做React Bootstrap，明天再來介紹介紹~

參考資料：
如何在 JSX 中加入 CSS 樣式？
Styling and CSS