AppBar材质用户界面问题 [英] AppBar Material UI questions

问题描述

我对Material UI库还很陌生，但到目前为止我真的很喜欢！但是，我在覆盖其他内容的AppBar组件时遇到问题.我的App.js呈现方法中目前有< AppBar/> 和< myComponent/> .这是该代码段:

I'm pretty new to the Material UI Library but I really like it so far! However, i am having an issue with the AppBar component overlaying over my other content. I currently have <AppBar /> and <myComponent /> in my App.js render method. Here is the code snippet for that:

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

这是myComponent函数的代码:

This is the code for the myComponent function:

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

但是，当我运行此代码时，AppBar组件会覆盖"Hello"消息.有什么办法可以在AppBar下显示我的问候消息(和相应的代码)?这是一个简单的问题，但我很想找出答案！

However, when I run this code, the "Hello" message is overlaid by the AppBar component. Is there some way to have my hello message (and corresponding code) be displayed under the AppBar? It's a simple question but I would love to figure this out!

推荐答案

您可以将 paddingTop 添加到包含的 div 中，以补偿 AppBar的高度(默认为64px):

You can add paddingTop to the containing div to compensate for the height of the AppBar (64px by default):

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

这篇关于AppBar材质用户界面问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！