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

只需将!important css（内联或外部css）添加到AppBar组件即可。如果使用外部css强制覆盖material-ui中定义的样式，则需要margin-top。不要忘记将MAIN TABLE DoubleValue | | | | ---------------------------------------- 1,40 | | | | 1,80 | | | | 2,00 | | | | 1,80 | | | | 1,60 | | | | 1,60 | | | | ---------------------------------------- SECOND TABLE DoubleValue | Points | Weight | ------------------------------- 1,00 | 100 | 2 | 1,20 | 98 | 2 | 1,40 | 96 | 2 | 1,60 | 94 | 2 | 1,80 | 92 | 2 | 2,00 | 90 | 2 | -------------------------------设置为您的内容，因为它会被推到顶端。

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

2 个答案: