今天會介紹Material UI 的排版系統，可以進入官網從側邊欄可以看到以下畫面:

Container

我們先從Container的組件開始講解，從命名來說和bootstrap的class="container"的概念是一樣的，只不過寬度的部分變成properties: maxWidth，接受值分別為'false'|'xs'|'sm'|'md'|'lg'|'xl'

<Container maxWidth="sm">

Breaking Point的部分default值和bootstrap是一樣的，當然也可以透過複寫的方式去更動，如果想要拿掉預設的padding的話，只需要加上properties: disableGutters，如果想要固定尺寸的話可以下properties: fixed，來讓最大寬度以匹配當前斷點的最小寬度。

Box

Box 組件能夠作為一個包裝組件來使用，它會創建一個新的 DOM 元素，默認情況下會是div，可以透過
properties: component 進行變更，接受的值將會是html tag的字串。

<Box component="span" m={1}>
  <Button />
</Box>

它也是自帶 margin, padding 的 properties，用法就和bootstrap相同，只不過改為properties帶入參數值，參數值將會是你定義的spacing寬度，預設為'8px'，也就是說 m={1} === margin: 8px，以下可以在官網的這裡做參考:
m - margin
p - padding
方向
t - top 上
b - bottom 下
l - left 左
r - right 右
x - 水平軸 (左&右)
y - 縱軸(上&下)
從上面可以組成你想要的spacing，例如:
mt={3} || mx={1} || py={0.5} || p={0,2} ...以此類推，也可以丟入字串，例:
mb="2rem" || py="auto"
如果需要調整寬度高度的話也可以在 Box 內的 properties: height || width 下對應的參數來變更，詳細可以看這裡
再來就要用到比較常用的排版 Flexbox 了，可以在這裡查看詳細，我個人在使用 flex 排版的時候會比較喜歡用 Box 打包起來，直接用它的 properties: display 去下 flex 的效果，例如:

<Box 
  display="flex"
  justifyContent="center"
  alignItems="center"
  flexDirection="row"
  flexWrap="wrap"
  m={1}
>
    <Box p={1} order={2} bgcolor="#CCC">
      Item 1
    </Box>
    <Box p={1} order={1} bgcolor="#CCC">
      Item 2
    </Box>
    <Box p={1} order={3} bgcolor="#CCC">
      Item 3
    </Box>
</Box>

properties 的命名也與 CSS 是相同的，只是需要轉成駝峰命名，帶入的值也與css相同。

當然，properties: display，也可以定義成其它的形式，例如: 'block', 'inline', 'none'...等等,也可以針對不同的 Breaking Point 以物件的格式做切換:

<Box display={{ xs: 'block', md: 'none' }}>
  小尺寸
</Box>
<Box display={{ xs: 'none', md: 'block' }}>
  中尺寸
</Box>

上面的做法一樣可以用在 spacing 或 sizing 上，用來對不同尺寸的螢幕做不同程度的縮放。

今天的講解就先到這裡，其實Box的應用還很多，明天會和各位補充 Grid 排版及 createTheme 的用法。