I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the container. Can anyone assist me in resolving this problem?
Here is the code snippet:
import * as React from 'react';
import {
Container,
AppBar,
Box,
Toolbar,
Typography,
Button,
} from '@mui/material';
import './style.scss';
export default function App() {
return (
<div>
<Container maxWidth={false} component="main">
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" className="extend-width">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
</Container>
</div>
);
}
CSS:
h1,
p {
font-family: Lato;
}
main.MuiContainer-root {
.extend-width {
position: relative;
width: 95vw;
left: calc(-47.5vw + 50%);
}
}
Stackblitz link: Link
The goal is to ensure the AppBar inside the Container extends similar to the one outside the container.
The desired outcome is for any element with the class extend-width to stretch to the edges of the viewport.
Your assistance is highly valued. Thank you.