Material UI Container

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Typography component in the Material-UI library.

Container:

It is the basic Material-UI component that centers the content horizontally. It manages the layout of its children.

There are two types of styling and adjusting properties that can be used with the container.

Fluid: The Fluid container wraps the content in it with maxWidth value which is provided as a prop, and this value will be the default value of the container.

maxWidth value defines the width of the screen that we are targeting.

• xl: 1920px(extra large)
• lg: 1280px(large)
• md: 960px(medium)
• sm: 600px(small)
• xs: 0px(extra small)

Fixed: If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed property. The max-width matches the min-width of the current breakpoint.

Syntax:

<Container maxwidth="lg">
   <h1>This is Container</h1>
</Container>

Installing React App:

Step1: Create a React app using the following command.

npx create-react-app container-example

Step 2: Get into the project directory.

cd container-example

Installing Material-UI: 

npm install @material-ui/core
// OR
yarn add @material-ui/core

Import Container:

import Container from '@material-ui/core/Container';

Example:

App.js

import Container from '@material-ui/core/Container';
import React, { Component }  from 'react';


export default function SimpleContainer() {
  return (
    <>
      <Container maxWidth="lg">
        <h1  style={{ backgroundColor: '#cfe8fc'}}>
          Container Of maxWidth = lg
         </h1>
      </Container>
      <Container maxWidth="md">
        <h1  style={{ backgroundColor: '#cfe8fc'}}>
          Container Of maxWidth = md
         </h1>
      </Container>
      <Container maxWidth="sm">
        <h1  style={{ backgroundColor: '#cfe8fc'}}>
          Container Of maxWidth = sm
        </h1>
      </Container>
      <Container maxWidth="xs">
        <h1  style={{ backgroundColor: '#cfe8fc'}}>
          Container Of maxWidth = xs
        </h1>
      </Container>
      <Container fixed>
        <h1  style={{ backgroundColor: '#cfe8fc'}}>
          Container with fixed prop
         </h1>
      </Container>
    </>
  );
}

Output: