Material UI in React [Day 3] Layout (Grid & ThemeProvider)

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 的部分做更详细的解说。