AppBar offset component when it's fixed

On material design react components repo they have a component that helps when the top bar is fixed:

Use the <TopAppBarFixedAdjust /> component to give your content top-padding, so it isn’t hidden on page render.

I’ve made one based on material UI that helps, so you could integrate it.

import React from "react";
import { makeStyles } from "@material-ui/styles";

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

export default function AppBarOffset() {
  const classes = useStyles();
  return <div className={classes.offset} />;
}

Use as:

<AppBar position="fixed" />
<AppBarOffset />

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

[oliviertassinari]

What’s wrong with the Toolbar component?

import React from "react";
import {
  Box,
  CssBaseline,
  AppBar,
  Toolbar,
  Typography,
  Button,
  IconButton,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";

export default function ButtonAppBar() {
  return (
    <div>
      <CssBaseline />
      <AppBar position="fixed">
        <Toolbar>
          <Box mr={2}>
            <IconButton edge="start" color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
          </Box>
          <Typography variant="h6">News</Typography>
          <Box flexGrow={1} />
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
      <Toolbar />
      Text to be shown.
    </div>
  );
}

https://codesandbox.io/s/material-demo-bnlpz

[oliviertassinari]

@adeelibr Yes, I think that it would be great to document the placement issue. For instance, I have seen @jlengstorf hit by this problem in a recent video.