The Material-UI Container is a great all-purpose layout component. The fluid container makes it even easier to center and size components exactly as you want them. How? The fluid container expands and contracts with screen size according to a simple maxWidth prop easily passed to the component.
If you want to convert the below tutorial to MUI v5 syntax, take the CSS values in the classes below and use them in the sx prop.
This article was originally written with Material-UI v4, but full MUI v5 code is in the Resources section.
Material-UI Container maxWidth
In this container tutorial we’ll stack three containers – the top container with maxWidth="sm", the middle with maxWidth="md", and the bottom with maxWidth="lg". The top container also has padding removed (which is why there is no grey on the left or right), the middle container has a border that changes color on hover, and the bottom container has custom margin (and we’ll discuss why the container might not be centered).
A container bound by maxWidth may be either a fixed container or a fluid container. It is “fluid” if it does not have the fixed prop. As the screen grows, the container gently (and fluidly) expands to fill the space. If maxWidth is set, the container will stop growing at the appropriate width, i.e. 960px for a maxWidth='md'.
A fluid container is actually a div with some default styling applied by Material-UI. The below screenshot of dev tools shows some of those stylings applied to the middle container. For example, MUI applied padding, width, and (since it’s a fluid container) maxWidth. I applied the border attributes via a css class.
The default maxWidth value for sm is 60px, md is 960px, and lg is 1280px (UPDATE: for MUI v5 the lg size is now 1200px instead of 1280px). If your screen is smaller than one of these maximums, you won’t see the maxWidth property listed in dev tools.
I wanted to override the default maxWidth for the “md” size fluid container, so I targeted the .MuiContainer-maxWidthMd class. You can also see that in the screenshot below. If I desired to override the md width for all fluid containers, I would create a new theme to accomplish this global styling.
Material-UI Fixed Width Container
A fixed width container does not expand to fill all available space up until the maxWidth value. Instead, a fixed container “jumps”. For example, if the viewport is 1200px wide then the container will only be 960px wide. Once the viewport is more than 1280px wide then the container will “jump” to 1280px.
A fixed width container can be constrained by the maxWidth prop. If maxWidth='md', then the container will max out at 960px wide.
Material-UI Full Width Container
If you want a container to fill the full width of the screen, you need to use a nested selector so that your styling uses a more specific selector than the default MUI styling. For example, you can use the &.MuiContainer-maxWidthLg nested selector below.
containerLg: {
"&.MuiContainer-maxWidthLg": {
width: "100%"
}
}Class containerLg is applied on the container component. Notice that the component also has class .MuiContainer-maxWidthLg applied. I did not specify this class or add the maxWidth prop to the component, this class is applied by default.
UPDATE: in MUI v5, the lg style now adds maxWidth: 1200 instead of maxWidth: 1280.
If you are struggling to achieve the exact layout you desire with the Container, consider using the Box component for properly aligning components.
Resources
Full React code with MUI v5 is below. Here’s how to add padding, margin, background color, and border to the MUI Container.
import React from "react";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
const styles = {
container: {
backgroundColor: "rgba(0,0,0,.4)"
},
containerMd: {
"&.MuiContainer-maxWidthMd": {
maxWidth: 1000
}
},
typography: {
height: "33.333vh"
}
};
export default function SpacedContainers() {
return (
<>
<Container
maxWidth="sm"
sx={{...styles.container}}
>
<Typography
component="div"
sx={{...styles.typography, backgroundColor: 'blue'}}
/>
</Container>
<Container
maxWidth="md"
sx={{...styles.container, ...styles.containerMd}}
>
<Typography
component="div"
sx={{...styles.typography, backgroundColor: 'red'}}
/>
</Container>
<Container
maxWidth="lg"
sx={{...styles.container}}
>
<Typography
component="div"
sx={{...styles.typography, backgroundColor: 'green'}}
/>
</Container>
</>
);
}
Code Sandbox Link – This tutorial still uses MUI v4 code. Also, after opening the Sandbox, choose the “Open in new window” option to see the full effect of the fluid container.
