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

Time:12-06

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;
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

////CSS

.buy-container {
    overflow-y: hidden;
    width: 100vw;
}
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

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;
}
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response:

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