Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

Styling React Components

本文介紹 React 中基本的樣式撰寫方式,包含 Inline Style、CSS Modules、styled-components 等方式。

Inline Style

除非需要做動態新增 style 的操作,否則基本上不推薦使用 style 屬性作為修飾 Elements 的手段,因為使用 CSS class 通常比 inline-style 的效能更好。

要在 JSX 中放入 JavaScript 邏輯會需要一對括號,括號裡面會再放一個物件來撰寫我們的 inline-style,所以寫起來會有兩對括號,像是 style={{background: #ccc, fontSize: '16'}}

如果覺得這樣太混亂,可以另外定義一個物件,再用 style 屬性接收它,而且這麼做也可以防止 XSS 安全漏洞,例如:

1const divStyle = {
2  background: '#ccc',
3  fontSize: '16',
4};
5
6const HelloWorldComponent = () => {
7  return <div style={divStyle}>Hello World!</div>;
8};
9

Styled Components vs. CSS Modules

Styled Components 與 CSS Modules 該如何選擇?

兩者都是很棒的實踐方式,彼此也都有一些獨特的優點勝過對方。

使用 CSS Modules 與撰寫原本的 CSS 很類似,所以也能夠使用 SCSS、StyleLint 等功能。除此之外,很多人主張不喜歡把所有的東西(像是樣式)都放入 JavaScript,因而選擇使用 CSS Modules。

至於 Styled Components 的優點,最明顯的就是 CSS in JS 的特色,這讓開發者可以在 style 裡面使用 JavaScript 的邏輯,同時也少了 CSS 的檔案,因此整體檔案數量比較少。

除此之外,比起使用 <h1> 標籤搭配 className 的方式,使用 Styled Components 像是 <Title> 的這種形式在語意上讓人覺得更好閱讀。

就我個人而言,我覺得使用 Styled Components 的開發速度比較快,尤其是從零開始開發一個專案的時候,然而雖然 CSS in JS 很方便、快速,但是在後續維護的可讀性上,或許 CSS Modules 會更簡單好懂。

回顧

看完這篇文章,我們到底有什麼收穫呢?藉由本文可以理解到…

  • Inline Style
  • Styled Components vs. CSS Modules

References