30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

繼前兩篇，可以大概知道 React 是怎麼處理畫面架構與資料了

先來講講 CSS 的部分吧!

React CSS

Header.js

import "./Header.css"

const Header = () => {
  return (
    <div className="header">
      <h2 className="header-title">Welcome</h2>
      <button>Just Button</button>
    </div>
  )
}

Header.css

.header {
  width: 100%;
  height: 100%;
}

.header-title {
  font-weight: bolder;
}

基本上就與一般 HTML+CSS 方式相同

從上面範例來看，可以看到我們有一個 Header 的元件

將 CSS import "./Header.css" 引入之後

下方使用 className 帶入寫好的 class

要注意不是 class，若寫成 class 也不會出錯，但會有一堆黃黃的警告

---

Inline Style

若要用 Inline Style

一般的寫法

<div style="font-size: red; width: 56px">HELLO WORLD!</div>

React 的寫法

<div style=>HELLO WORLD!</div>

可以看見 style中是用 {} 包含一個物件

key 的部分則是使用 camelCase，font-size > fontSize

value 的部分則是以 string 表示，若是數字會預設單位為 px，如果要用其他單位則用 string 表示(如上述width)

---

隱含的小問題

在 React 中，我們會將畫面拆成數個元件

CSS 檔也是可以拆成數個管理，分別引入

但其實引入的 CSS 檔案會是全域，意即：

• 只要不同元件但CSS名稱相同，可能會有樣式衝突
• 使用複數的CSS名稱或用:first-child，也可能會有衝突的風險
• 要能管理好每個名稱不會重覆

這時候可以用兩個方式解決

• CSS module
• Styled Components 官網

---

CSS module

CSS module 可以將每個 CSS 模組化，編譯渲染的時候

會將 class 名稱後再加上一串 hash 的亂碼

這樣的話就算有其他 CSS 檔案有一樣的名稱也不怕衝突

Header.js

import classes from "./Header.module.css"

const Header = () => {
  return (
    <div className={classes.header}>
      <h2 className={classes.header - title}>Welcome</h2>
      <button>Just Button</button>
    </div>
  )
}

Header.module.css

.header {
  width: 100%;
  height: 100%;
}

.header-title {
  font-weight: bolder;
}

Dev Tools 查看

圖片非上方例子

可以看見 class="Button_button__1vm_i

也就是 檔案_樣式名稱_hash

---

Styled Components

與上面 CSS module 概念類似，產生 hash

Header.js

import styled from "styled-components"

const Header = styled.div`
  width: 100%;
  height: 100%;

  &:hover {
    cursor: pointer;
  }
`

return <Header />

不用另外撰寫 CSS 檔案，直接寫在 js 裡面

引入 styled components 之後，用 styled.tag的方式選擇需要的 HTML TAG

而 CSS 寫法則與 SCSS 類似

---

2021/08/11 下一篇不知道要寫什麼 QQ