iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
0

到昨天為止都著重在 JS 的部分,基本的功能已經可以完成了,但除了功能以外,網頁應用的外觀也是很重要的,所以今天就暫時把 JS 擺在一邊,看看在 React 中要怎麼寫 style 吧!

學習框架以前大多數人應該都會接觸過 CSS,很幸運的,在 React 中依然可以使用一般我們熟悉的 CSS 。
使用方式差不多,可以為元素定義 class、id,再到 CSS 檔針對該元素做 styling。
有一點點不一樣的是

https://ithelp.ithome.com.tw/upload/images/20190915/20113277ITbh2xV2XV.png

以往我們習慣的 class 在 JSX 中要寫成 className,因為 class 在 JS 中是保留字。

https://ithelp.ithome.com.tw/upload/images/20190915/201132774DiJQR9iTe.png

https://ithelp.ithome.com.tw/upload/images/20190915/20113277hD1tucpC0b.png

最後記得在 component 中把 CSS 引入進來喔,這樣 webpack 最後在打包的時候才會幫你打包 CSS 的檔案。

Inline-style

React 提供了另一種 style 的寫法,可以直接在 JSX 中加上 style。
https://ithelp.ithome.com.tw/upload/images/20190915/20113277nhjEipuoea.png

我們可以直接在單一 JSX 元素加上 style 屬性,style 後需要用兩個大括號包起來是因為撰寫的是 JS 所以需要加大括號(外層),內層括號則是 JS 物件,以key、value pair 定義元素的屬性,特別注意的是因為是 JS 物件,所以 value的部分若是字串需用引號包起來,如:

background: 'red'

另外在純 CSS 中有加 “-" 符號的屬性都必須改為駝峰式寫法,如:

    background-color: red;
    改成
    backgroundColor: 'red'

最後因為是 JS 物件所以屬性分隔會使用逗號而不是分號,如:

color: red;
font-size: 14px;

改成

color: 'red',
fontSize: '14px'

既然是 JS 物件,我們也可以把它拆出來寫:
https://ithelp.ithome.com.tw/upload/images/20190915/20113277xikZUZARtm.png

Inline-style 缺點

使用 Inline-style 雖然方便,但是他卻沒有辦法實作如 media-query、hover 等特殊 css 效果。
這時你可以有幾個選擇:

  • 搭配使用一開始介紹的引入 CSS 模組的方式
  • radium 套件
  • 後面篇章會介紹的 styled-component

最近 style 的技術也越來越多元,時不時就會出現新的 style 系統,建議大家可以多多嘗試,了解各種方法的優缺與使用時機。


上一篇
【Day 10】第二個 hook - useEffect
下一篇
【Day 12】Styled-component
系列文
React.js 從 【0】 到【1】推坑計畫 30

尚未有邦友留言

立即登入留言