今天的課程是要用 JSX 來設定 HTML 元素的 style 屬性。

以往要在 HTML 裡面引用 CSS 的 property & value，可以在 class 裡面打上 style 就可以控制 h1 字的顏色：

<h1 style="color: red"> Hello </h1>

不過在 ReactDOM.render 裡面這樣就會報錯：

×
Error
The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
in h1 (at src/index.js:10)
in div (at src/index.js:9)

OK～ 原因很明顯，因為我們傳送出去的 style="color: red" 對 style= 來說這是 string，但在 JSX 裡面，他想要用 value 來控制 style 這個屬性（attribute）。

在 JavaScript 裡面，value 長得像這樣：

{color: "red", key: "value" ......}

所以這時改成這樣，回報的錯誤就會被解決了：

<h1 style={{color:"red"}}>HOHOHOHOOOOOOO</h1>

接著可以做更複雜的 styling 設定，像是用變數來控制 style：

const customStyle = {
  color: "red",
  fontSize: "20px",
  border: "1px solid black"
};

ReactDOM.render(
  <h1 style={customStyle}>Hello World!</h1>,
  document.getElementById("root")
);

使用這樣的方式來控制 styling 的好處是之後若有 event listener 的需求時，可以直接用 變數名稱.color = "blue"; 來控制想要變化的 value。