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

查看:53
本文介绍了AppBar材质用户界面问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对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屋!

登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆