Container - Material-UI Reactjs

Container component of React material-ui:

Container component is used to center contents horizontally. We have two types of Containers defined in Material-UI. One is called Fluid and another is called Fixed.

By default, it creates one Fluid container. In this post, we will learn how to use Container component with examples.

Video:

I have published one video on YouTube. You can watch it here:

Fluid container:

As explained above, by default Material-UI creates one Fluid container. The width of a Fluid container is bound by the maxWidth property.

Let's try with an example.

import { Container } from "@material-ui/core";

function App() {
  return (
    <div>
      <Container style={{ backgroundColor: "red" }}>
        <h3>Hello World !!</h3>
      </Container>
    </div>
  );
}

export default App;

We have added one Container here with a background color.

If you run it, it will give the below output:

This is a Fluid container and its width is handled by the maxWidth property. By default, maxWidth is 100%. If you change the screen width, it will always take the full screen size.

Now, if I change it as :

<div>
    <Container style={{ backgroundColor: "red" }} maxWidth='sm'>
        <h3>Hello World !!</h3>
    </Container>
</div>

It changed the maxWidth and also the width of the container is changed as small screen size width.

You can also try changing it to other width like md, it will change the value.

Fixed container:

This is another type of container. For these containers, maxWidth matches the minimum width of the current breakpoint.

To create a fixed container, you just have to add one props called fixed to the Container component.

The below program creates one fixed container:

import { Container } from "@material-ui/core";

function App() {
  return (
    <div>
      <Container style={{ backgroundColor: "red" }} fixed>
        <h3>Hello World !!</h3>
      </Container>
    </div>
  );
}

export default App;

It will create one similar container, but if you change the widow size, it will change its width or its maxWidth.

Fixed containers are useful to create any responsive layouts.