AppBar Material UI 个问题

Question

我是 Material UI 图书馆的新手，但到目前为止我真的很喜欢它！但是，我遇到了 AppBar 组件覆盖我的其他内容的问题。我目前在我的 App.js 渲染方法中有 <AppBar /> 和 <myComponent />。下面是代码片段：

render(){
   return (
   <div>
      <AppBar />
      <myComponent />
   </div>
   );
}

这是 myComponent 函数的代码：

function myComponent(){
   return (
   <h1>
      Hello
   </h1>
   );
}

但是，当我运行这段代码时，"Hello" 消息被 AppBar 组件覆盖。有没有办法让我的问候消息（和相应的代码）显示在 AppBar 下？这是一个简单的问题，但我很想弄明白！

Answer 1

您需要将上边距从顶部添加到您在应用栏正下方创建的组件

如果您需要代码，我是通过手机发布的，请告诉我，我会为您解决

Answer 2

您可以将 paddingTop 添加到包含 div 以补偿 AppBar 的高度（默认为 64px）：

render() {
  return (
    <div style={{ paddingTop: 64 }}>
      <AppBar>
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar>
      </AppBar>
      <YourComponent />
    </div>
  );
}

AppBar Material UI 个问题

AppBar Material UI questions

appbar

reactjs

material-ui