前言

昨天聊到 styled-components，以及 CSS-in-JS 對於 React 開發的重要性，但考量到程式規模愈趨複雜，不太可能連一些很基本的元件都要自己刻。

今天就來看看比較方便的工具 - Material-ui

先想一下

• Material-ui 是在什麼樣的時代誕生的？
• Material-ui 怎麼解決問題？
• Material-ui 的優缺點是什麼？
• Material-ui 適合什麼情境？

Material-ui 是在什麼樣的時代誕生的？

進入元件化開發的階段，如果網站本身對於畫面沒有太多要求，固然可以簡單用昨天提到的 styled-components 等 CSS-in-JS 工具，自己寫幾個元件出來。

但隨著使用者對於產品質量要求的提高，客製化元件的需求也會愈來愈多：

• 有些地方按鈕要放大
• 有些地方按鈕不要外框
• 有些地方按鈕要用主題色強調

再加上每位 UI 設計師的想法不盡相同，可能導致設計風格不統一：

• 按鈕放大字體要多大？padding？
• 按鈕不要外框那字體顏色會變嗎？
• 按鈕主題色，是套在文字？外框？還是背景？

若再隨著設計成員更迭，設計風格將更難以朝向一致的目標邁進，往往會在一個產品內，甚至一個頁面內，看到兩種大小不一的按鈕。

Material-ui 怎麼解決問題？

Material Design

Google 在 2014 年提出了 Material Design 的設計理念，從設計的角度思考，推出一套設計風格來規範設計師與開發者。

由於「風格」是一種更高層次的「理念」，所以實際上即便使用不同語言、不同平台等，依然可以保證其一致的設計風格。

但 Material Design 也只是一種設計「概念」，而最受歡迎的 Material-ui 就是實作了 Material Design 的一個前端 UI 框架。

Material-ui

Material UI is a library of React UI components that implements Google's Material Design.

其實可以簡單把 Material-ui 當作早期的 Bootstrap 等 UI framework，主打的就是提供一套完善的 UI 元件，並且遵守 Material Design 的設計風格，使用者只需要引入套件後，就能夠使用一系列風格一致的元件。

易於使用的 UI 元件

對於一些 UI 苦手的工程師來說，UI 元件好不好套用，API 易不易讀，絕對是非常重要的事情！這一點 Material-ui 應該算是做得滿好的了，而且元件有夠多，只有你想不到，沒有你找不到XD！

以 Button 按鈕元件為例：

import React from 'react';
import Button from '@mui/material/Button';

const Components = () => {
  return <Button>My Button</Button>;
}

同時，如果有需要操控到元件的一些狀態，也可以透過 props 帶入：

<Button
  variant="outlined"
  color="primary"
  size="large"
  onClick={() => {
    console.log('clicked');
  }}
>
  My Button
</Button>

一致的 Theme

能夠讓 UI 框架內元件一致的重點在於，一些基本的樣式必須要全元件統一，來自同一個來源，而那個來源就是 theme。

Material-ui 有自帶一組預設的 theme，裡面包含了

• palette：調色盤
• typography：字體大小
• spacing：間距
• 更多參考這裡

同時，也可以在 MuiThemeProvider 提供自己客製化的樣式，並注入到底下的 element，就可以自訂自己 app 的主題色、元件間距等：

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  // 這裡可以使用 theme.palette.primary.main、theme.spacing 等
}

Material-ui 的優缺點是什麼？

優點

• 簡單套用，提升開發效率
• 與設計師溝通的參考基準
• 快速統一前端 UI 設計風格與功能

缺點

風格一致的反向就是相對缺乏彈性，畢竟 Material-ui 不是為了某一個特定的 domain (比如電商之類)設計的，而是更加泛用性的，因此使用過程中，還是有些地方會覺得，目前的元件無法提供較佳的配合，無論是樣式方面或功能方面，這部分客製化就要比較小心，以免撞到既有的設計。

Material-ui 適合什麼情境？

著重在功能方面的網頁，對於前端 UI 要求不高，比如後台管理系統，可以不用做太多客製化，Material-ui 直接套上去就有 UI 了。

另外對於風格有一致性需求的團隊，也很適合使用，強制讓團隊成員都以 Material-ui 為基準來處理、討論設計，才不會寫出風格差異太大的元件。

但如果你的團隊更傾向有差異比較大的元件，搞不好用了 Material-ui 還要東改西改，此時也可以考慮一些像是 Headless ui 與 tailwindcss 之類的套件，分開定義元件的行為與管理樣式，而非像 Material-ui 直接使用。

結語

心智圖放大版

Material-ui 在初期開發時，真的是幫了我很多忙，因為新創公司專案初期，最重要的是快速驗證市場，因此 app 的功能是否能 match 市場需求，可能會比按鈕大小是否一致更重要一點。

不過隨著專案成長，設計團隊慢慢掌握到一些設計風格與規範，我們的元件變得客製化愈來愈多，離 Material-ui 原本的樣子也愈來愈遠，我們才開始考慮是否有其他方案，不一定是要把 Material-ui 整套換掉，但如果搭配其他工具能更好配合，會是一個很好的機會！

參考資料

Material-ui