KEY

當渲染一系列的資料，記得加上 key props 來讓 React 更好的渲染

---

CSS

撰寫 inline style 時，與一般 HTML 不太一樣的地方

用雙花括，也可以在裡面進行判斷式

注意：使用 camelCase，而非 Dash border-color

<label style=> </label>
<label style=></label>

---

將 CSS 變成區域性

不管在哪個元件引入 CSS，都是屬於 global

意即有可能會名稱重覆，導致樣式跑掉、汙染等等

有兩種做法可以將 CSS 變成區域性

• CSS module
• Styled Components

CSS module

將 CSS 模組化，引入時以物件的形式，直接像操作物件的方式即可

步驟：

• CSS 改名為 name.module.css
• 引入的地方改為 import styles from './name.module.css'
• 名稱改 className={styles.button}

const Button = props => {
  return (
    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>
  )
}

可以注意到 class 後面部分，產生了獨特的亂碼

增刪樣式

---

Styled Components

概念與 CSS module 類似，皆會產生獨一無二的 class 名稱

但寫法是寫在 JS 裡面，也就是不用另外的 CSS 檔案

寫法:

• styled 後面選擇需要的 tag
• 前面直接寫入樣式
• 後續樣式則用&
• RWD 直接寫入即可

import styled from "styled-components"

const Button = styled.button`
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  @media (min-width: 768px) {
    width: auto;
  }

  &:focus {
    outline: none;
  }

  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`

也可以直接在 JS 裡面判斷狀態來更改樣式，很方便 一樣在 HTML 地方利用 props，圖片為 invalid={!isValid}