Container component in Reactjs material-ui library

Introduction to Reactjs Container:

Container is a basic component of Material-UI in Reactjs. This component is used mainly to center the items horizontally. We can treat a container as the topmost layout and put other components in it.

There are two types of containers available: Fluid and Fixed.

In this post, we will learn how to use these containers with examples.

Types of Material-UI Containers:

There are two types of Material UI containers available:

1. Fluid container: The width of these types of containers is bound by maxWidth property. We can provide different values to maxWidth and that will define its width.

2. Fixed container: If we mark one Container as fixed, its width will be fixed. The maxWidth matches the minimum width of the current breakpoint.

Example of Fluid container:

Let’s take a look at the below example:

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

function App() {
  return (
    <div>
      <Container style={{background: 'blue'}} maxWidth='sm'>
        <h3>Hello World !!</h3>
      </Container>
    </div>
  );
}

export default App;

If you run this program, it will give one output as like below:

i.e. it is taking the maximum width of 600px or sm. If you change the screen width, it will not change its width.

Example of fixed container:

We can change the above code to a fixed container as like below:

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

function App() {
  return (
    <div>
      <Container style={{background: 'blue'}} fixed>
        <h3>Hello World !!</h3>
      </Container>
    </div>
  );
}

export default App;

i.e. we have added the fixed property here. If you change the screen size, it will change its width accordingly. The maximum width matches the minimum width of the current breakpoint.

fixed containers are useful if you want to create any responsive layouts and fluid containers are useful if you want any layout with fixed screen width.

You might also like:

• Typechecking in react js using propTypes
• Find the file name, size, type and modified date of a file in ReactJS
• How to create your first reactjs app using create-react-app
• What are Components in Reactjs and how to use these components
• How to add Material-UI to an existing Reactjs app
• Box component in material UI reactjs library