import : 
import * as React from 'react';
import Container from '@mui/material/Container';

config.layout.tsx : setting style
const theme = createTheme ({
      components : {
            MuiContainer : {
                  styleOverrides : {
                       root : {
                             "&.MuiContainer-maxWidthXs" : {
                                    maxWidth :'var(--container-xs)' ,
                              }
                             "&.MuiContainer-maxWidthSm" : {
                                    maxWidth :'var(--container-sm)' ,
                              }
                             "&.MuiContainer-maxWidthMd" : {
                                    maxWidth :'var(--container-md)' ,
                              }
                             "&.MuiContainer-maxWidthLg" : {
                                    maxWidth :'var(--container-lg)' ,
                              }
                             "&.MuiContainer-maxWidthXl" : {
                                    maxWidth :'var(--container-xl)' ,
                              }
                             "&.MuiContainer-maxWidthXxl" : {
                                    maxWidth :'var(--container-xxl)' ,
                              }
                        },
                  },
            },
      },
});

component : size
className="container"

<Container className="container" sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > className="container" </Container>
fluid

<Container maxWidth={false} sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > fluid </Container>
maxWidth=xxl

<Container maxWidth="xxl"sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > maxWidth=xxl </Container>
maxWidth=xl

<Container maxWidth="xl"sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > maxWidth=xl </Container>
default

<Container sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > default </Container>
maxWidth=lg

<Container maxWidth="lg"sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > maxWidth=lg </Container>
maxWidth=md

<Container maxWidth="md"sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > maxWidth=md </Container>
maxWidth=sm

<Container maxWidth="sm"sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > maxWidth=sm </Container>
maxWidth=xs

<Container maxWidth="xs"sx={{ p: 2, border: '1px dashed  var(--color-gray)', textAlign: 'center' }} > maxWidth=xs </Container>