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.
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.
<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.
npm install @material-ui/core // OR yarn add @material-ui/core
import Container from '@material-ui/core/Container';