How do I make material ui container have full width and height?

user_10818030 0
Viewed 22871

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: enter image description here

But I want it to look like this with full width: enter image description here

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

material-ui reactjs css
5 Answers

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

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

Edit: 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.

https://mui.com/api/container/

user_172080140

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%'
}));
user_112234140

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.

user_91955760

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

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

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.
user_74477050
Related