在幾個專案的嘗試後，大都還是使用 material UI ，一方面是他的組件切得夠細，堆疊性很高，每個組件處理的事情也不那麼複雜，在組件穿插使用的彈性也相對高很多。

Design System

Theme - Change and override

Material UI 的主題是使用他的 Theme Object來更改。透過更改裡面的值去修改全局的樣式，並使用 createMuiTheme 覆寫：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: #000,
    },
    secondary: {
      main: #DDD,
    },
  },
});

另外也可以自行擴充屬性，只要將要新增的屬性加入即可：

import { createMuiTheme } from '@material-ui/core/styles';

const customizeProps = {
   shadow: '0px 0px 5px rgba(0,0,0,0.17)',
}

const theme = createMuiTheme({
  ...customizeProps,
  palette: {
    primary: {
      main: #000,
    },
    secondary: {
      main: #DDD,
    },
  },
});

如此一來可以以直接在 theme 中取得該屬性

const styles = theme => ({
   root: {
       shadow: theme.shadow
   } 
});

Color Palettes

色版的部分主要有 Primary、Secondary、Error，Warning、Info以及Success。如果需要擴充也可以自己多定義。

顏色深淺的部分則可以用 light、main、dark 三個屬性去微調。

組件樣式的更改則需要參考該組件 api 文件中 CSS 的部分，只要在 style 中指定相同的 key 值即可更改，以Paper為例：

import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
    root: {
      border: '1px solid red'
    }
})

export const CustomerizePaper = ({ classes, children}) => 
(<Paper classes={classes}>{children}</Paper>)

export default withStyles(styles)(CustomerizePaper)

Layout - Display of content

Grid System

格線是使用 12 格線系統，跟 ant design 比較不同的是他沒有offset可以設置，必須自己插入一格空白的組件（算是題外話）。

由最外面設置為 container，被包住的則是 item。基本的使用方式如下：

<Grid container >
  <Grid item xs={12} md={6} lg={4}>
      Hello Design System
  </Grid>
</Grid>

RWD 的部分可以透過 xs, md, lg 等方式做設置。

Layout

Layout 的部分就，分為上方的 AppBar(Header)，以及左邊的 SideBar(Drawer)，滿固定的。

只是另一個神奇的設計是他的響應式 Drawer 是寫兩個 Drawer 後依照裝置大小去顯示，感覺也滿妙的。

可參考:Material Design Drawer

Font

文字的部分 Material UI 就單純區分字的大小，variant 可以有以下的設置，並透過主題物件來改變對應到的 html tag。

基本使用：

<Typography variant="h1" component="h2">
  h1. 标题
</Typography>

直接調整 component 對應

const theme = createMuiTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});

Components

Input

主要的 Input 可以包含一個 label，能收合在上方。這樣的好處是Input 之間比較好對齊，樣式就是一塊一塊的。

  <TextField id="standard-basic" label="Standard" />
  <TextField id="filled-basic" label="Filled" variant="filled" />
  <TextField id="outlined-basic" label="Outlined" variant="outlined" />

Table

Material UI 的Table可以自己一個一個組裝，我覺得比較符合平常使用 React 的習慣，基本表格如下：

<TableContainer component={Paper}>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>HEADER TITLE</TableCell>
        ...
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.name}>
          <TableCell>{row.name}</TableCell>
          ...
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

就如同寫原生 html 的一樣一層一層去寫，透明度也比較高。如果你跟我依樣不喜歡框架幫你做太多你看不到的事情，這樣的做法其實滿好的。

可參考: Material UI Table

Message

提示信息的組件也是交給使用者看要放在哪一個位置，並透過 open 的屬性來控制開關。有別於 Ant Design 直接呼叫 Funciton 作法，直接使用組件好處也是可以更直覺地去客製化以及加入組件。

<Snackbar
  open={open}
  message='Hello SnackBar'
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
    action={
      <React.Fragment>
        <Button color="secondary" size="small" onClick={handleClose}>
          UNDO
        </Button>
        <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
          <CloseIcon fontSize="small" />
        </IconButton>
      </React.Fragment>
    }
/>

小結

喜歡使用的 Material UI 的原因是因為他的程式碼風格比較符合平常寫 React 的習慣，相對於 Ant Design 來說，他像是給使用者一盒樂高積木，由使用者決定要怎麼使用。只是在樣式上就偏歐美的簡潔風格，在平常專案上就要做很多的調整，才能符合實際的樣式需求（就那個做太多事情的Input來說，要改動的真的也滿多的，所以只能用他的 InputBase）。

優點：

• 組件都切成一個一個小部分，好堆疊好設計。
• Props 部分複雜度低。
• 主題用物件的形式很好調整，也好擴充。

缺點：

• 每個組件都要 withStyles 才可以取得 theme，使用HOC成本高。
• CSS 修改的部分如果沒有 export 出來給你就無法修改。