How to Override Material UI Container Width

MUI container is a basic layout element for centering content horizontally. It comes with multiple width size options, and in this tutorial, we will explore how to customize and override the container width.

If you’d like to skip all the details, below is the complete code example:

Install MUI

Below is the minimum required setup to support all Material UI Container features:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Emotion library is required to create React components that have styles attached to them.

Option 1: Override component’s width directly

MUI container uses a simple CSS technique behind the scenes for centering an element:

.container {    
    margin-left: auto;
    margin-right: auto;
    max-width: 400px; // just a random size
}

And they provide multiple width options to choose from using the maxWidth prop; each one has a default value. Let’s take a simple example with a header and links:

import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link/Link';
import Stack from '@mui/material/Stack/Stack';
import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <Box>
      <Container maxWidth="sm" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>

      <Container maxWidth="md" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>

      <Container maxWidth="lg" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>
    </Box>
  );
}

If we don’t need multiple width options or don’t require to re-use the same element elsewhere in the project, the simplest solution is to turn off the built-in maxWidth option and override the root element’s width:

import Container from '@mui/material/Container';
import Link from '@mui/material/Link/Link';
import Stack from '@mui/material/Stack/Stack';
import Box from '@mui/material/Box/Box';
import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <Box>
      <Container
        maxWidth={false}
        sx={{ maxWidth: '200px', border: '1px solid' }}
      >
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>

      <Container maxWidth="md" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>
      <Container maxWidth="lg" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>
    </Box>
  );
}

We can see how the first header is now smaller than the original default value.

Option 2: Override maxWidth prop globally

Using MUI ThemeProvider, we can customize all width options globally without having to turn off the maxWidth prop:

import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link/Link';
import Stack from '@mui/material/Stack/Stack';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import * as React from 'react';
import './style.css';

const theme = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: {
        maxWidthSm: {
          maxWidth: 200,
        },
        maxWidthMd: {
          maxWidth: 320,
        },
        maxWidthLg: {
          maxWidth: 500,
        },
      },
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>
      <Container maxWidth="md" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>
      <Container maxWidth="lg" sx={{ border: '1px solid' }}>
        <Stack spacing={2} direction="row">
          <Link>Home</Link>
          <Link>About</Link>
          <Link>Contact</Link>
        </Stack>
      </Container>
    </ThemeProvider>
  );
}

All headers are now shrunk to the new sizes we added above. Further more, we have multiple custom width options that can be re-used anywhere in the application without requiring the container’s component to be directly re-styled. In return, that approach is less redundant and brings a more consistent layout across the application.

Summary

Any Material UI component can be customized directly from the element or globally using the ThemeProvide. If we customize the container width only once and will not re-use it, then styling it directly using the sx prop is a good and quick option. Otherwise, if our layout requires multiple custom containers, then using the ThemeProvide for customizing different width options is a preferred approach.

I hope you enjoyed learning from this tutorial and if you have any questions, please leave a comment below.

Bye for now!