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