CODEWITHSUNDEEP
reactjsmaterial-uiappbar
Sean
Sean

Reputation: 689

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!

Upvotes: 2

Views: 938

Answers (3)

fifaltra
fifaltra

Reputation: 375

Using the position: "sticky" prop for appbar did the trick for me:

render(){
  return (
    <div>
      <AppBar sx={{position: "sticky"}}/>
      <myComponent />
    </div>
  );
}

Upvotes: 0

Jeff McCloud
Jeff McCloud

Reputation: 5927

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

Upvotes: 0

Shubham
Shubham

Reputation: 738

You need to add the top margin from top to the component which you have created right below the app bar

I am posting this from mobile if you need code just let me know I will right it for you

Upvotes: 1

Related Questions