How to Override Material UI .Muicontainer-Maxwidthlg

How to override Material UI .MuiContainer-maxWidthLg?

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

How to set maxWidth of Container to 100% Globally

Instead of trying to override the CSS, the simplest approach is to set the default for the prop:

const theme = createMuiTheme({
  props: {
    MuiContainer: {
      maxWidth: false
    }
  }
});

Edit Container maxWidth in theme

Set a default maxWidth for all Containers in Material UI (React)

The Globals docs specify how to globally set default props. In this case it would be:

const theme = createMuiTheme({
  props: {
    MuiContainer: {
      maxWidth: "md",
    },
  },
})

How to combine overrides in Material UI (React) - overwrite both theme styles and component styles

This code works perfect for me:

import React from 'react';
import './App.css';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button, Container } from '@mui/material';

let theme = createTheme({});

theme = createTheme(theme, {
  components: {
    MuiContainer: {
      styleOverrides: {
        maxWidthLg: {
          [theme.breakpoints.up('lg')]: {
            maxWidth: 1280
          },
        }
      }
    }
  },
  palette: {
    brand: '#0D3B66',
    primary: {
      main: '#4caf50',
    },
  },
  typography: {
    fontFamily: '"Mukta", sans-serif',
    fontWeight: 400,
    h1: {
      fontSize: 24,
    },
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <Button>Primary</Button>
      </Container>
    </ThemeProvider>
  );
}

export default App;

You can see the result: Sample Image

How to customize theme in Material-UI with Typescript?

Good that you found the answer!
For anybody else when you face such a problem with Material-UI and you are using and IDE that will let you jump to the file responsible in node_modules (or you can search for it) With a little reading you might solve it and maybe get a better understanding of the thing you are trying to use ex:

export interface TransitionsOptions {
  easing?: Partial<Easing>;
  duration?: Partial<Duration>;
  create?: (
    props: string | string[],
    options?: Partial<{ duration: number | string; easing: string; delay: number | string }>
  ) => string;
  getAutoHeightDuration?: (height: number) => number;
}

Material UI nested class override

Try:

MuiSelect: {
  select: {
    '&&': { ... },
  }
}

This is the line of source code where the default is set (paddingRight: 24px), and the mui theme key to override it is '&&'. I was able to find this by first finding the source code of the native select component, and then searching for the css value that showed up on the dom element I was trying to override.

How to make React Material UI Grid 100% width

I spun up a codesandbox with your code and inspected the html. I noticed this:
Sample Image

For me, the body of the page is adding 8px to the left. I added style="margin: 0px;" to the body tag in index.html.

  <body style="margin: 0px;">

Now it looks like:
Sample Image

How to Override Material UI .Muicontainer-Maxwidthlg