MUI Container: How to Customize and Override Width

The MUI Container is a fundamental layout component in Material UI. It is designed to manage the width of the content it encloses, ensuring it doesn’t span the entire viewport width but is centered horizontally. This functionality is crucial for creating visually appealing layouts by preventing content from stretching too wide on large screens, thus maintaining a consistent and aesthetically pleasing appearance.

Throughout this tutorial, we will explore different methods of implementing MUI Containers, highlighting the importance of each approach and how they contribute to effective layout design. This will include examining the various properties available with the Container component, such as maxWidth and fixed, to tailor the Container’s behavior to specific design needs.

Fluid Container

By default, the MUI Container component is fluid, automatically adjusting its width to match the viewport with a default maxWidth limit of 1200px.

import React from "react";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";

export default function FluidContainer() {
  return (
    <Container>
      <Box sx={{ bgcolor: "#cfe8fc", height: "100vh" }} />
    </Container>
  );
}

In this example, as the viewport size increases, the content will be centered and won’t stretch beyond the default max width of 1200px (the lg breakpoint). And as it decreases below 1200px, the content will take up the entire width of the viewport.

MUI provides several maxWidth options, allowing for granular control over how the content scales with the screen size.

• xs - Extra small devices (phones, less than 600px)
• sm - Small devices (tablets, 600px and up)
• md - Medium devices (desktops, 960px and up)
• lg - Large devices (large desktops, 1200px and up)
• xl - Extra large devices (extra large desktops, 1536px and up)

So if the default maxWidth of 1200px doesn’t suit our design, we can easily adjust it to match the specific requirements:

import React from "react";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";

export default function CustomMaxWidthContainer() {
  return (
    <Container maxWidth="md">
      <Box sx={{ bgcolor: "#cfe8fc", height: "100vh" }} />
    </Container>
  );
}

Now, the Container component will stop growing beyond the 960px width, which is the md breakpoint.

Fixed Container

A fixed container in MUI maintains a constant width regardless of the viewport size, only adjusting its width when it crosses a predefined breakpoint (like md, sm, etc.). This behavior ensures that the Container’s width remains stable and does not shrink or expand with the window resizing, providing a consistent layout experience across different screen sizes.

import React from "react";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";

export default function FixedContainer() {
  return (
    <Container fixed>
      <Box sx={{ bgcolor: "#cfe8fc", height: "100vh" }} />
    </Container>
  );
}

This example demonstrates how a container with a fixed property adheres to a set width until it reaches the specified media breakpoint, unlike fluid containers that continuously adjust their width based on the viewport size.

The fixed Container’s behavior is due to the maxWidth property being set for all breakpoints, ensuring that the container’s width remains constant until the viewport size exceeds the specified breakpoint.

We can use the theme to override the default MUI breakpoints:

import React from "react";
import { createTheme, ThemeProvider, Container, Box } from "@mui/material";

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 300,
      md: 660,
      lg: 980,
      xl: 1620,
    },
  },
});

export default function CustomFixedContainer() {
  return (
    <ThemeProvider theme={theme}>
      <Container fixed>{/* More content here */}</Container>
    </ThemeProvider>
  );
}

This will have a global effect on all containers within the application.

Overriding Container Max Width

To customize the layout beyond the default Material Design screen sizes, you can override the MUI Container’s maxWidth directly from the theme or on a per-component basis. This flexibility allows for tailored layout designs that better suit the unique requirements of our application.

Overriding from Theme

We can override default maxWidth values by customizing the theme. This approach ensures consistency across all containers within our application:

import { createTheme, ThemeProvider, Container } from "@mui/material";

const theme = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          "&.MuiContainer-maxWidthSm": {
            maxWidth: "400px",
          },
          "&.MuiContainer-maxWidthMd": {
            maxWidth: "600px",
          },
          // Add other classes as needed
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm">
        {/* This Container will use the new sm maxWidth of 400px */}
      </Container>
    </ThemeProvider>
  );
}

In this example, we used the styleOverrides property to customize the maxWidth values for the sm and md classes, ensuring that all containers within the application will use the overridden maxWidth values.

Overriding from Component

We can also directly override the maxWidth from the component, allowing for per-component customization.

import Container from "@mui/material/Container";

function CustomMaxWidthContainer() {
  return (
    <Container
      maxWidth="md"
      sx={{
        "&.MuiContainer-maxWidthMd": {
          maxWidth: "600px",
        },
      }}
    >
      {/* This Container will use the new md maxWidth of 600px */}
    </Container>
  );
}

In this example, we used the sx prop to override the maxWidth for the md breakpoint directly from the component, ensuring that only this specific container will use the overridden maxWidth value.

Disabling maxWidth

For complete customization, setting maxWidth to false and using the sx prop allows precise control over the Container’s width, effectively turning off the default behavior and enabling full customization.

import Container from "@mui/material/Container";

function FullWidthContainer() {
  return (
    <Container
      maxWidth={false}
      sx={{
        width: "100%", // Full width
      }}
    >
      {/* This Container will use the full width */}
    </Container>
  );
}

Conclusion

MUI Container component offers versatile layout solutions, allowing for both fluid and fixed designs tailored to the application’s needs. Whether we’re adhering to Material Design standards or requiring custom dimensions, the Container’s maxWidth property and theme customization capabilities provide the flexibility needed to create consistent and responsive layouts.

Complete Code

Bye for now 👋