Dock App Bar to top of window in react material ui

Question

In React material ui, how do you make app bar fixed so that it stays fixed while the rest of the page scrolls?

Answer 1

Just add a position: fixed !important; css (inline or with external css) to your AppBar component. The !important is needed if you use external css to force overriding the style defined in material-ui. Don't forget to set margin-top to your content because it will get pushed to the top.

Answer 2

Don't know if this feature is just new but you don't need the code above. Just add a position="fixed" attribute to your <AppBar />

return (
  <div className={classes.root}>
    <AppBar position="fixed">
      <Toolbar>
        <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="title" color="inherit" className={classes.flex}>
          Title
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  </div>
);

Adjusted example from: https://codesandbox.io/s/yw67vxwo69 (demo.js)