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;

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