Dock App Bar to top of window in react material ui

问题

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

回答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.

回答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)

来源：https://stackoverflow.com/questions/43647661/dock-app-bar-to-top-of-window-in-react-material-ui