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

Posted 2023-04-13

【中文标题】主页名称出现在 AppBar 后面，我该如何解决？

【英文标题】：Homepage name appears behind the AppBar, How do I fix this?

【发布时间】：2021-10-09 07:39:44

【问题描述】：

我有一个 appBar，主页会出现在 appbar 的后面。我希望它出现在它下面。这是它的样子：

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;

而且我有这个用于小屏幕尺寸的抽屉组件，更糟糕的是，你将无法再看到任何消息，除非在消息之前会有很多 <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;

【参考方案1】：

解决此问题的一种方法是将margin-top 或padding-top 添加到您的homepage 组件中，等于appbar 的高度。

然而，更好的方法是在您的 appBar 上使用以下 CSS 属性。

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

这将使您的 appbar 贴在顶部，并会自动调整其后续 DOM 元素的高度。

【参考方案2】：

这篇文章可能会回答你的问题：Creating a navbar with material-ui

你可以试试：

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