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);