将应用栏停靠在反应材料 ui 中的窗口顶部答案

【问题标题】：Dock App Bar to top of window in react material ui将应用栏停靠在反应材料 ui 中的窗口顶部
【发布时间】：2017-04-27 02:30:03
【问题描述】：

在 React Material ui 中，如何使应用栏固定，以便在页面其余部分滚动时保持固定？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

只需将position: fixed !important; css（内联或带有外部 css）添加到您的 AppBar 组件。如果您使用外部 css 强制覆盖 material-ui 中定义的样式，则需要 !important。不要忘记将margin-top 设置为您的内容，因为它会被推到顶部。

【讨论】：

【解决方案2】：

不知道此功能是否只是新功能，但您不需要上面的代码。只需将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)

【讨论】：

不幸的是，当您将内容添加到“演示”以便启用滚动时，应用栏会在您滚动时向上移动并且不会停留在屏幕上（也就是在您滚动到的任何位置停靠一个可访问的)。不知道为什么您对此答案表示赞成，但请尝试纠正，因为它是错误的，并且没有解决 OP 的要求。
@zuckerburg 你能举个例子吗？因为去年它对我有用，即使有内容。不要在最新版本中检查它。
抱歉。我认为您的 demo.js 链接是一个工作版本，而不是您用作答案基础的参考内容的链接
不客气。我将在今天晚些时候更改它以使其更具可读性