Estoy tratando de crear una barra de aplicaciones que se usará en cada página colocándola en un solo lugar. Así que creé un componente de encabezado personalizado, usé la respuesta de aquí para evitar superponer las superposiciones de AppBar con otros elementos , pero no funciona para mí; aún así, el encabezado se superpone a los elementos envueltos en el interior. ¿Cómo agregar una barra de navegación en reaccionar en un lugar para cada página?

Componente de encabezado:

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

y su uso

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