Material UI in React [Day 2] Layout (Container & Box)

今天会介绍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 的用法。