Material UI Container
Last Updated :
19 Feb, 2021
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...