dock应用程序栏可在React材料UI中的窗户顶部

Question

在React材料UI中，如何使应用程序栏固定，以使其在页面的其余部分滚动时保持固定？

Answer 1

不知道此功能是否只是新功能，但您不需要上面的代码。只需将position="fixed"属性添加到您的<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>
);

调整后的示例来自：https：//codesandbox.io/s/yw67vxwo69(demo.js(

Answer 2

只需在Appbar组件中添加一个position: fixed !important; CSS(内联或外部CSS(即可。如果使用外部CSS强制材料UI中定义的样式，则需要!important。不要忘记将margin-top设置为您的内容，因为它会被推到顶部。