I'm trying to create an AppBar which will be used on each page putting it in one place. So I created a custom header component, used the answer from here to avoid overlaying AppBar overlaps with other elements but it doesn't work for me - still, the header overlays on elements wrapped inside. How to add a navbar in react in one place for every page?

Header component:

import { AppBar, Typography, Box } from '@material-ui/core';

const styles = (theme) => ({
    appBarSpacer: theme.mixins.toolbar,
});

const style = withStyles(styles);

function Header({ children, classes }) {
    return (
        <div>
            <AppBar>SMC</AppBar>
            <div className={classes.appBarSpacer}></div>
            <Box>{children}</Box>
        </div>
    );
}

export default style(Header);

And it's usage

export default function Home() {
    return (
        <Header>
            <DashboardComponent />
        </Header>
    );
}