[小ネタ]reactのmaterial-uiでヘッダー分のマージンを追加してコンテンツがかぶらないようにする

reactのmaterial-uiを使用している時にヘッダーとコンテンツがかぶっていたのでその対策として、マージンを追加する必要があった。
公式サイトにはなぜか書いていなかったような気がしたので、以下に記載する。

例えば、以下のレイアウト

import { makeStyles } from "@material-ui/core/styles";
import Header from "../organisms/header";

const useStyles = makeStyles((theme) => ({
  offset: {
    ...theme.mixins.toolbar,
    flexGrow: 1,
  },
}));

const Layout: React.FC = ({ children }) => {
  const classes = useStyles();
  return (
    <>
      <Header />
      <div className={classes.offset} />
      {children}
    </>
  );
};
export default Layout;

Headerコンポーネントの下にdivを追加しています。
このdivに対して、offsetを追加して上げることで、Headerコンポーネントに指定されたToolbar文だけコンテンツを下げることができます。
Headerコンポーネントは以下の通りです。

import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import * as Colors from "@material-ui/core/colors";

const useStyles = makeStyles((theme) => ({
  appBar: {
    color: Colors.common.white,
  },
}));

const Header: React.FC = () => {
  const classes = useStyles();
  return (
    <header>
      <AppBar className={classes.appBar} position="fixed">
        <Toolbar>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </header>
  );
};

export default Header;