Material UI in React [Day5] Theme ( Spacing & Breakpoints & z-index)

今天会接续昨天的部分继续讲解 Theme 的 Spacing，这部分其实很简单各位可以透过这里直接引用官网的范例即可。

Spacing

自定义的话可以用以下几种方式:

• number

const theme = createTheme({
  spacing: 4,
});

theme.spacing(2) // = 4 * 2

• function

const theme = createTheme({
  spacing: factor => `${0.25 * factor}rem`, 
});

theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px

• array

const theme = createTheme({
  spacing: [0, 4, 8, 16, 32, 64],
});

theme.spacing(2); // = 8

theme.spacing() 最多可以接受4个参数，参数与 CSS 的规则一样，分别为上、右、下、左:

padding: theme.spacing(1, 2, 3, 4), // '8px 16px 24px 32px'

Breakpoints

这里和之前说明 Grid 时所提及的一样，透过官方文件能够更清楚的了解到他们各自的预设值与写入方式:

可以透过以下方式直接更改:

• theme.breakpoints.up(key)
• theme.breakpoints.down(key)
• theme.breakpoints.only(key)
• theme.breakpoints.between(start, end)

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { green } from '@material-ui/core/colors';

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('sm')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
}));

export default function MediaQuery() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Typography>{'down(sm): red'}</Typography>
      <Typography>{'up(md): blue'}</Typography>
      <Typography>{'up(lg): green'}</Typography>
    </div>
  );
}

或是重新自订 theme 中的 breakpoints

• theme.breakpoints.values：预设为上面表格值，key是您的屏幕名称，值是该断点应开始的最小宽度。
• theme.breakpoints.unit：预设为 px，用於断点值的单位。
• theme.breakpoints.step：预设为 5 (0.05px)，用於实现独占断点的增量。

// 下面是预设值
const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
})

也可以随意使用任意数量或任意数量的断点，以自己希望的任何方式命名它们。

const theme = createTheme({
  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
});

z-index

这部分官方文件提供一些default，修改方式也跟上述差别不大，也没有特别的 function 利用，所以我就不再赘述了。

那麽今天的讲解就先到这边，明天会将最後的 Globals 讲解完毕，并继续官网侧边栏的组件继续讲解