The Ultimate Guide to Material-UI Container

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.

Full React code for this tutorial is in the Code Sandbox Link 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).

Material-UI Container with maxWidth

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.

As info, the default maxWidth value for sm is 60px, md is 960px, and lg is 1280px. 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 Container DOM
Fluid container with md default maxWidth override

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.

Container DOM with default class
Container DOM with default class

Material-UI Container Padding, Border, and Margin

Left and right padding can be removed on containers with the disableGutters={true} prop:

<Container
  maxWidth="sm"
  className={`${classes.container} ${classes.containerSm}`}
  disableGutters={true} //same as setting padding: 0 in class
>

Alternatively, I could simply override the padding with padding: 0 inline styling or via a CSS class. Usually in Material-UI overriding default styling with CSS is not as simple as that.

I set border on the second container and change the border style on hover over the container:

containerMd: {
  border: "2px solid black",
  borderRadius: 4,
  "&.MuiContainer-maxWidthMd": {
    maxWidth: 1000
  },
  "&.MuiContainer-root:hover": {
    border: "4px solid green"
  }
}

Notice the syntax in the hover selector. The spacing and colon must be very precise.

In the large container, I set marginTop and marginBottom to 8px simply via CSS.

containerLg: {
  marginTop: "8px",
  marginBottom: "8px"
}

However, if I try to set marginLeft or marginRight, it will remove the automatic centering of the component. This is because margin ‘auto’ was applied by MUI to center the container, as we can see in the dev tools screenshot above.

If you are struggling to achieve the exact layout you desire with the Container, consider using the Box component for properly aligning components.

Resources

Code Sandbox Link – After opening the Sandbox, choose the “Open in new window” option to see the full effect of the fluid container.

Material-UI Container docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.