Search code examples
reactjsmaterial-uiappbar

AppBar Material UI questions


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>
   );
}

This is the code for the myComponent function:

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

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!


Solution

  • 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>
      );
    }