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:
