Chakra-UI 使用心得與學習要點

使用 Chakra-UI 一段時間了，我大約是從 2021 年 3 月開始導入到專案中，到至今我已經將 Chakra-UI 應用到 5 ~ 6 個專案中，我覺得我可以分享出來讓大家知道這個強大的 UI framework 如何運作，以及核心要點是什麼，還會說明我選擇此框架的原因。

為什麼選擇 Chakra-UI ?

起初我進公司時是用 ant-design，但在經過多次需求更改及畫面變動我遇到了一個很大的問題，就是設計稿的風格完全跟 ant-design 對不太上，導致必須一直做客製化組件，這時就很明顯感覺到 ant-design 在客製化這方面並不友好，我一直在用覆蓋的方式修改樣式，然而這對維護並不是好事。

而之後公司有個專案希望我負責設計，包含專案結構及 routing，這對我一個 junior 來說是個不小的挑戰，不過我帶著嘗試的心態跟主管提我要用 Chakra-UI。

而我當時選擇的原因主要有幾點

組件單純，組件與組件的組合性很強
強大的客製化系統
有一套可遵循的樣式規範
可直接寫 props 修改一個組件近九成樣式

Chakra-UI vs. tailwinds-CSS ?

起初我也是有跟其他框架作比較，但我覺得比起其他框架，Chakra-UI 的想法跟 tailwinds-CSS 更為接近。兩者之間比較明顯的區別是寫法跟客製化的模式，tailwinds 算是做到了很高的彈性，但高彈性意味著客製化方式更複雜，這表示事前規劃變得更為重要，當時我們專案狀況的設計稿還沒有一個很明確的規範，像是間距、斷點等等，並且我認為 tailwinds 的寫法對於團隊協作來說並沒辦法維持一定的水準（樣式的使用及 coding 的風格）。

而 Chakra-UI 在客製化部分的一個優勢在於他有一個可遵循的樣式規範，讓對於專案樣式規劃不熟悉的人有個依據，你也可以從中學習到哪些部分有明確定義能減低開發心智負擔。而另一個優勢在於組件客製化的風格能直接寫在 config 裡，不需要自己在重新包裝一個出來，在彈性及易用性達到一個很好的平衡點。

學習要點

在學習使用 Chakra-UI 前必須先知道它的核心組件Box，所有其他 Chakra 組件都是基於 Box 製作的，以下是 Box 在官方文件的敘述。

Box is the most abstract component on top of which all other Chakra UI components are built. By default, it renders a div element.

雖然這代表你可以全部用 Box 拼出來所有的東西，但這並不是一個好的作法，我會更建議善加利用其他組件來製作畫面，因為其他組件不僅能跟 Box 一樣撰寫非常多樣式，同時會附帶一些額外功能，如 Stack、SimpleGrid 等等。所以我認為使用 Chakra-UI 的第一步就是學習在適合的地方用適當的組件，而不是總是用 Box 去拼。

客製化設定

這是 Chakra-UI 非常重要的一部分，只要你能掌握好，開發過程會非常快樂，起初我會建議先以合併 Chakra-UI 自己預設的設定檔作搭配使用，因為基本上預設的樣式及設定都已經非常泛用了，不需要花更多心思把每個部分都處理到位，除非你們的設計搞有非常詳細明確的規則。

所以以下我會列出幾個比較重要的部分

colors

顏色會根據設計稿來作定義，通常會有主題色、文字顏色等等，如果你們設計師沒有定義這些東西，請務必建議他們定義好，這會讓我們在製作上更方便，同時可以擁有更改主題色的功能。
styles

styles 通常是一些間距及單位換算，可以讓你用更有規範的方式來調整這些大小，我建議可以參考 Chakra 本身預設的，因為預設的就已經很完整了。
components

每個組件客製化主要分為三部分：baseStyles、sizes、variants，最常見會設定的就是 Button、Input、CheckBox、Radio 等等，但有個地方需要注意，就是有些組件是由幾個小零件組成（如：Input），所以在寫 config 的時候不一定是直接寫 style 就 ok 了，有時候會需要這樣寫：
```
{
   //...
   variants:{
     solid:{ // 型態的名稱
       control:{ // 組件的某個部件的稱呼
         color:"red"
       }
     }
   }
}
```
但 Chakra-UI 在這部份似乎沒有詳細描述哪些組件會分零件，所以我的辦法是直接看 default theme 的 source code，雖然有點麻煩但 code 本身不難懂，所以通常都有解。

雖然 Chakra 還有非常多有趣的設定等著我們去發揮，但入門只要先掌握好上述三個，就可以體會到 Chakra 強大。

定位

其實有稍微看過 Chakra-UI 提供的組件，你會發現其實都是非常單純的組件，但我認為這並不是 Chakra-UI 的缺點，透過組件強大的組合性能夠讓你很好的發揮，同時自己設計複雜組件也多了一份樂趣，像 DatePicker 就是我第一個在專案中設計的複雜組件，且經過我的修修改改後，做了一個通用版本放到我的 github 上面，有興趣可以參考看看。

那同樣都在拼積木，Chakra-UI 與其他 UI-framework 的區別是什麼？

我認為差別在於積木的大小，Chakra 在這方面拿捏的恰當好處，不會小到讓人拼起來煩躁耗時，也不會大到讓整體的可塑性降低。

結語

我從 Chakra-UI 中不僅體會到組件組合的樂趣，同時也讓我學習到網站樣式規範設計該從何著手，讓一個剛開始毫無頭緒的我開始有想法。Chakra-UI 在我心中已經不是一個單純的工具，而是一個學習效仿的對象，顏色、間距的單位、斷點設定、字級、組件的型態等等都是能從 Chakra-UI 提取出來嘗試應用在其他 UI-framework 中，所以即便不使用 Chakra-UI，你也能從中獲取一點靈感。