主页名称出现在 AppBar 后面，如何解决？

Question

我有一个应用栏，主页会出现在应用栏后面。我想让它出现在它下面。这是它的样子：

AppBar 代码：

const Header = () => {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  //Breakpoints
  const theme = useTheme();
  const isMatch = useMediaQuery(theme.breakpoints.down("md"));
  return (
    <div>
      <AppBar>
        <Toolbar>
          {/* //or just change this typography to an icon or picture */}
          <Typography>Website</Typography>
          {isMatch ? (
            <h1>
              <DrawerComponent />
            </h1>
          ) : (
            <Tabs
              value={value}
              indicatorColor="secondary"
              onChange={handleChange}
              aria-label="simple tabs example"
            >
              <Tab disableRipple label="Homepage" to="/" component={Link} />
              <Tab disableRipple label="Login" to="/login" component={Link} />
              <Tab disableRipple label="Settings" />
              <Tab disableRipple label="Sample1" />
              <Tab disableRipple label="Sample2" />
              <Tab disableRipple label="Sample3" />
            </Tabs>
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default Header;

我需要放一个<br/>才能看到主页：

const Homepage = (props) => {
  return (
    <section>
      <br />
      <h1>Homepage</h1>
    </section>
  );
};

export default Homepage;

而且我有这个用于小屏幕尺寸的 drawerComponent，它甚至变得更糟，你将再也看不到任何消息，除非在消息之前有很多 <br/>。

const DrawerComponent = () => {
  const useStyles = makeStyles((theme) => ({
    drawerContainer: {},
    iconButtonContainer: {
      marginLeft: "auto",
      color: "white",
    },

    menuIconToggle: {
      fontSize: "3rem",
    },
    link: {
      textDecoration: "none",
    },
  }));

  const [openDrawer, setOpenDrawer] = useState(false);

  //Css
  const classes = useStyles();
  return (
    <div>
      <Drawer
        anchor="left"
        classes={{ paper: classes.drawerContainer }}
        onClose={() => setOpenDrawer(false)}
        open={openDrawer}
        onOpen={() => setOpenDrawer(true)}
      >
        <List className={classes.link}>
          <Link to="/">
            <ListItem divider button onClick={() => setOpenDrawer(false)}>
              <ListItemIcon>
                <ListItemText> Homepage</ListItemText>
              </ListItemIcon>
            </ListItem>
          </Link>

          <Link to="/login">
            <ListItem divider button onClick={() => setOpenDrawer(false)}>
              <ListItemIcon>
                <ListItemText> Login</ListItemText>
              </ListItemIcon>
            </ListItem>
          </Link>
          <ListItem divider button onClick={() => setOpenDrawer(false)}>
            <ListItemIcon>
              <ListItemText>Sample</ListItemText>
            </ListItemIcon>
          </ListItem>

          <ListItem divider button onClick={() => setOpenDrawer(false)}>
            <ListItemIcon>
              <ListItemText> Sample</ListItemText>
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>

      <IconButton
        edge="end"
        className={classes.iconButtonContainer}
        onClick={() => setOpenDrawer(!openDrawer)}
        disableRipple
      >
        <MenuIcon className={classes.menuIconToggle} />
      </IconButton>
    </div>
  );
};

export default DrawerComponent;

Answer 1

这个 post 可能会回答您的问题：Creating a navbar with material-ui

您可以尝试：

使用 CSS 实现 padding-top（使用“em”而不是“px”作为响应式填充高度）
重新组织你的 React 组件，确保 header (appbar) 不在页面中，而是同一级别的组件（参考上面链接的 post）

Answer 2

解决此问题的一种方法是将 margin-top 或 padding-top 添加到 homepage 组件，等于 appbar.[=16= 的高度]

然而，更好的方法是在 appBar.

上使用以下 CSS 属性

.app-bar {
  position: sticky;
  top: 0;
}

这将使您的应用栏保持在顶部，并自动调整其后续 DOM 个元素的高度。

主页名称出现在 AppBar 后面，如何解决？

Homepage name appears behind the AppBar, How do I fix this?

javascript

reactjs

material-ui

drawer

appbar