Make AppBar flow out of container - Material UI - React

a2441918 0
Viewed 18

I am wrapping up my app inside a MUI Container with maxWidth set to false. I have an AppBar inside the container and I want the AppBar to take the whole screen width, but the container enforces a paddingX property which prevents the AppBar from extending towards the end of the viewport. Could you please help me out on this?

This is my code:

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 AppBar inside Container should look like the AppBar outside the container.

Expected output is that anything with the class extend-width should extend to the ends of the viewport.

Thanks. Any help is appreciated.

flexbox material-ui sass reactjs css
1 Answers

  1. Solution is to remove padding from container and instead use another container inside to wrap items with padding and exclude appbar.

  2. More dirty options is to use negative margin:


.app-bar {
  margin: 0 -24px; // Replace by theme.spacing or actual padding values
  width: calc(100% + 48px); //100% + marginX
}
Code Spirit0
Related