How do I make Material UI container have full width and height?

Question

I am trying to wrap a page in a React project in a Material UI container but it squeezes in all my content with these weird margins. Here is what it looks like:

But I want it to look like this with full width:

Haven't been able to find any other resources explaining how to change the width of the container. Does anyone have any workarounds? I tried adjusting the width of the container to be 100vw but it was unresponsive to my CSS. Here is my code:

////BUY PAGE

import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

////CSS

.buy-container {
    overflow-y: hidden;
    width: 100vw;
}

Macknair

Answer 1

You should be able to get the results you're looking for by setting the maxWidth property of Container to false e.g:

<Container maxWidth={false}>
  <AppBar />
  <Footer />
</Container>

The maxWidth property determines the max-width of the container. The container width grows with the size of the screen. By setting it to false you can disable the maxWidth property.

MUI Container

Sheaves

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Laue

Answer 2

You will need to add maxWidth={false} and disableGutters properties to the <Container/> component. Additionally, you should include the <CssBaseline/> component to reset the browser's CSS.

Example:

<>
    <CssBaseline />
    <Container maxWidth={false} disableGutters>
      {children}
    </Container>
</>

Container API

Name	Type	Default	Description
maxWidth	'xs', 'sm', 'md', 'lg', 'xl', false, string		Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.
disableGutters	bool	false	If true, the left and right padding is removed.

Capias

Answer 3

You should avoid to set the custom container width until changing the breakpoints.

Otherwise, you can use a custom div element or Box component.

// makeStyles
const useStyles = makeStyles(() => ({
  root: {
    height: '100%',
    overflow: 'hidden',
    width: '100%'
  },
}));

// styled
const LayoutContainer = styled('div')(() => ({
  height: '100%',
  overflow: 'hidden',
  width: '100%'
}));

Pellegrino

Answer 4

I would use the <Container> within <Box>/<Appbar> that has the background color e.g:

<Box sx={{ bgcolor: 'black'}}>
  <Container>
    My content
  </Container>
</Box>

Bluefish

Answer 5

I'd take a look at global css variables to overwrite the standard (see here):

The material docs suggest this way or using styling overrides which may be another option for you.

.MuiContainer-root {
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

FYI - I got the global css name from the Container portion of the docs under "root", in case you've not seen it.

Billat

Answer 6

I guess you need to use

<Container maxWidth={false} disableGutters component='main'>

Also inside theme file you should use

    MuiContainer: {
      styleOverrides: {
        disableGutters: {
          backgroundColor: globalTheme.palette.black.dark,
          height: '100vh',
        },
      },
    },

Please pay attention I didnt use root, I used disableGutters so for example if you are using container inside another components it should not be disableGutters

Also if you have not full height you should go with calc(100vh - 50px)

Plant

Answer 7

minHeight: '100%' worked for me in that kind of situation

Burkhardt

How is changing the height going to affect width? Please provide more detail on how this work, with example – Luxuriance

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bes