'How to override Material UI .MuiContainer-maxWidthLg?

I'm trying to get rid of max-width that present in the theme.
This is what I see in Chrome (and if I uncheck it, it does what I need):

@media (min-width: 1280px)
.MuiContainer-maxWidthLg {
    max-width: 1280px;
}

How can I do this? I tried something like this:

const useStyles = makeStyles(theme => ({
    root: {       
        '& .MuiContainer-maxWidthLg' : {
             maxWidth: //No matter what I put here, it does not work
        },

but it does not seem to have any effect... How can I override this?

Thanks,

Alex

cssreactjsmaterial-uioverriding


Solution 1:[1]

The maxWidth prop of Container defaults to 'lg', but you can prevent Material-UI trying to control the max width of the Container by setting maxWidth={false}.

Here's a simple example:

import React from "react";
import Container from "@material-ui/core/Container";
import Paper from "@material-ui/core/Paper";

export default function App() {
  return (
    <Container maxWidth={false}>
      <Paper>
        <h1>Hello CodeSandbox</h1>
      </Paper>
    </Container>
  );
}

Edit Container maxWidth

Related documentation: https://material-ui.com/api/container/#props

Code reference: https://github.com/mui-org/material-ui/blob/v4.9.13/packages/material-ui/src/Container/Container.js#L88

Solution 2:[2]

You can still achieve this with makeStyles:

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.up('lg')]: {
      maxWidth: <YourMaxWidth>px,
    },
  },
}))

Solution 3:[3]

The values below can be filled to your needs accordingly if material UI provided defaults don't suit you well.

    const theme = createMuiTheme({
      breakpoints: {
        values: {
          xs: ,
          sm: ,
          md: ,
          lg: ,
          xl: ,
          xxl:
        }
      }
    });
    
    export default theme;


//And add to app.js

import { ThemeProvider } from "@material-ui/core/styles";
import theme from "style/theme";

 <ThemeProvider theme={theme}>
    //yourCode
 </ThemeProvider>

Solution 4:[4]

Well, setting the following in a parent div worked:

'& .MuiContainer-maxWidthLg' : {
      maxWidth: '100%'
},

Solution 5:[5]

Well, in 22.11.2021 work like this

<Container sx={{ maxWidth:'100%'  }} maxWidth={false} >

Solution 6:[6]

If you want further customization of the lg breakpoint, this snippet might help. I'm following the global theme overrides guide here: https://mui.com/customization/theme-components/

This works for MUI 5.4.3

import { createTheme } from "@mui/material/styles";

let theme = createTheme({});
theme = createTheme(theme, {
    components: {
        MuiContainer: {
            styleOverrides: {
                maxWidthLg: {
                    [theme.breakpoints.up('lg')]: {
                        maxWidth: // Your custom value here
                    },

                    // Note that you can customize other properties here, like padding, color, .etc.
                }
            }
        }
    })

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jon E
Solution 3 Sandeep Amarnath
Solution 4 Alex Chernilov
Solution 5 Georgiy Beloklokov
Solution 6 Hasan Mothaffar

Related Questions