CODEWITHSUNDEEP
cssreactjsmaterial-ui
Casey Cling
Casey Cling

Reputation: 637

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

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

Upvotes: 30

Views: 110936

Answers (7)

Farid shahidi
Farid shahidi

Reputation: 352

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)

Upvotes: 0

Sadmiral
Sadmiral

Reputation: 606

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

Upvotes: 48

Nika Kaumidze
Nika Kaumidze

Reputation: 7

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

Upvotes: -2

aadlc
aadlc

Reputation: 1045

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.

Upvotes: 16

David Lemayian
David Lemayian

Reputation: 2799

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

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

Upvotes: 3

hotcakedev
hotcakedev

Reputation: 2504

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

Upvotes: 3

Steve
Steve

Reputation: 122

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.

Upvotes: 1

Related Questions