Content beneath fixed AppBar

Simply add an empty Toolbar after AppBar:

<AppBar>
  <Toolbar>
    ...toolbar content...
  </Toolbar>
</AppBar>

<Toolbar /> // <- does the trick

Source: https://github.com/mui-org/material-ui/issues/16844#issuecomment-517205129

Just use position="sticky" instead of position="fixed" for your AppBar.

Your content is on screen, but covered up by the AppBar. You can use theme.mixins.toolbar to load information about the app bar height and shift your content accordingly:

const styles = theme => ({
  // Load app bar information from the theme
  toolbar: theme.mixins.toolbar,
});

And then create a div above your content to shift your content accordingly:

<Paper>
  <div className={classes.toolbar} />
    MyContent will be shifted downwards by the div above. If you remove 
    the div, your content will disappear under the app bar.
</Paper>

What's happening here is that theme.mixins.toolbar is loading information about the AppBar dimensions into your styles. Then, applying that information to the div sizes the div so that it's exactly the right height for shifting your content down the screen.

Here's a full working example:

import React from 'react';
import Paper from 'material-ui/Paper';
import Reboot from 'material-ui/Reboot';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import { withStyles } from 'material-ui/styles';

const styles = (theme) => ({
  toolbar: theme.mixins.toolbar,
});

const App = (props) => {
  const { classes } = props;

  return (
    <div>
      <Reboot />
      <AppBar color="primary" position="fixed">
        <Toolbar>
          <Typography color="inherit" type="title">
            My Title
          </Typography>
        </Toolbar>
      </AppBar>
      <Paper>
        <div className={classes.toolbar} />
        MyContent will be shifted downwards by the div above. If you remove 
        the div, your content will disappear under the app bar.
      </Paper>
    </div>
  );
}

export default withStyles(styles)(App);