React是前端很重要的框架之一，今天就要來介紹我們在React中要如何使用CSS來增加我們網頁的豐富度。

首先，從最簡單的改顏色開始，想必有學過CSS的大家應該都知道CSS中該怎麼利用Style來改變顏色，在React中，我們也會這樣做，但是因為在 JSX 中，JavaScript 表達式寫在大括號內，由於 JavaScript 對象也使用大括號，所以上例中的樣式寫在兩組大括號內{{}}。

const Header = () => {
  return (
    <>
      <h1 style={{color: "blue"}}>React&CSS</h1>
    </>
  );
}

屬性名稱
在前面有介紹過，由於為了要區別與其他屬性的不同，React中會使用駝峰命名法來命名屬性的名稱，例如:classname在React中要使用className，我們在使用CSS的時候也要遵守這個法則，例如編寫背景顏色的background-color在React中必須要改成backgroundColor
<h1 style={{backgroundColor: "lightblue"}}>React&CSS</h1>

Object
你也可以創建一個object，然後接著引用你創建的object來對你的網頁進行動作

const Header = () => {
  const MyReact = {
    color: "black",
    backgroundColor: "red",
    padding: "15px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={MyReact}>Hello World!</h1>
    </>
  );
}

這裡你可以在你創建的object中一次定義玩你想要的狀態，接著只需要在後面的程式碼中引用他即可。
當然，你也可以另建一個新的資料夾來編寫你所有的CSS，名方法為XXX.css，然後再將你的XXX.css 文件import進去就好

body {
  background-color: #282c34;
  color: white;
  padding: 34px;
  font-family: Sans-Serif;
  text-align: center;
}

這是你創建的XXX.css所需的內容，編輯完之後，再使用import './App.css';import進去