Grid

今天要講解的是Grid排版的部分，如果是有使用過bootstrap的經驗的朋友，其實它的邏輯就和class="row" || "col"一樣，也是將畫面切成12等分去做排版，'row' == Grid container, 'col' == Grid item :

<Grid container>
    <Grid item>
        item
    </Grid>
    <Grid item>
        item
    </Grid>
    <Grid item>
        item
    </Grid>
</Grid>

• spacing
  詳細可以直接參考官網的範例， property: spacing, 帶入值一樣以 8px 為基本單位去換算,概念則和 CSS 的 grid gap 是一樣的，是每個 item 的 margin。

<Grid container justifyContent="center" spacing={2}>
// 這裡帶 2 則為 16px
  <Grid item>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      item
    </Box>
  </Grid>
  <Grid item>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      item
    </Box>
  </Grid>
  <Grid item>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      item
    </Box>
  </Grid>
</Grid>

• Breaking Points
  還記得 Bootstrap 可以直接下 breaking point 在class 'col'之中，像是 'col-sm-6' 嗎? 在這裡一樣可以在 item 的地方去下不同斷點的占比, 變成 sm={6} 這樣的形式

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=12
    </Box>
  </Grid>
  <Grid item xs={6}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=6
    </Box>
  </Grid>
  <Grid item xs={6}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=6
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
  <Grid item xs={3}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
</Grid>

當然你也可以給他不同斷點所佔的比例，或是直接不給值讓它自動依照斷點去生長:

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=12
    </Box>
  </Grid>
  <Grid item xs={6} sm={6}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=6
    </Box>
  </Grid>
  <Grid item xs={6} sm={4}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=6
    </Box>
  </Grid>
  <Grid item xs={3} sm={4}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
  <Grid item xs={3} sm={4}>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
  <Grid item xs >
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
  <Grid item sm>
    <Box bgcolor="skyblue" borderRadius={5} p={2}>
      xs=3
    </Box>
  </Grid>
</Grid>

雖然說它的標籤命名為 Grid 但還是基於 flexbox 去衍生的系統，與 CSS grid 還是有些許的差異，如果還是喜歡 CSS grid 的話也可以透過 Day1 makeStyles 的方式，去套用className 來進行修改。

Hidden

它的原理很簡單，只要把想要不見的部分包起來就可以了，斷點的話可以設立複數，用來達成不同的遮罩效果。詳細範例

ThemeProvider

這裡先簡單介紹一下 material 的 theme 系統，各位可以從這裡看到他們預設值的 Theme，也就是在沒有自訂 theme 的情況下的狀態，那麼也可以透過 createTheme 的方式自訂 primary color, spacing, fontSize... 等等, 再透過 ThemeProvider 將自訂好的 theme 帶入並使用:

import {
  Box,
  Button,
  createTheme,
  ThemeProvider
} from "@material-ui/core";
import { green, orange, purple } from "@material-ui/core/colors";
import React from "react";

const innerTheme = createTheme({
  palette: {
    primary: {
      main: purple[500]
    },
    secondary: {
      main: green[500]
    }
  }
});

const outerTheme = createTheme({
  palette: {
    secondary: {
      main: orange[500]
    }
  }
});

const App = () => {
  return (
    <div>
      <ThemeProvider theme={outerTheme}>
        <Box 
          display="flex" 
          justifyContent="space-between" 
          m={2}
        >
          <Button color="primary" variant="outlined">
            without Theme
          </Button>
          <Button color="secondary" variant="outlined">
            without Theme
          </Button>
        </Box>
        <ThemeProvider theme={innerTheme}>
          <Box 
            display="flex" 
            justifyContent="space-between" 
            m={2}
          >
            <Button color="primary" variant="outlined">
              without Theme
            </Button>
            <Button color="secondary" variant="outlined">
              without Theme
            </Button>
          </Box>
        </ThemeProvider>
      </ThemeProvider>
    </div>
  );
}

export default App;

那麼今天的講解就到這，明天會接續 Thiming 的部分做更詳細的解說。