Skip to content
Related Articles

Related Articles

Improve Article

Material UI Container

  • Last Updated : 19 Feb, 2021
Geek Week

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :