Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use Container Component in ReactJS?
The container component creates a container on the web page like a box. Also, we can set the height of the container according to the height of the inside content. Furthermore, we can set the variable width for the Container component.
Basically, we can use the Container to create a Rectangular box and add some HTML content inside that.
Users should use the below command to install the Material UI in the React project.
npm install @mui/material @emotion/react @emotion/styled
Syntax
Users can follow the syntax below to use the Cotnainer component of Material UI.
<Container maxWidth="xs"> // content of the container </Container>
In the above syntax, we can add the HTML content of the webpage inside the Container component.
Example
In the example below, we used the Container component to create a container. Also, we have passed the ‘maxWidth’ as a prop of the container component and assigned “xs” as its value representing the breakpoint.
In the output, users can observe that it sets the width of the container according to the width of the device. It means the width is fluid, and we can make a responsive design using that.
import React from "react";
import Container from "@mui/material/Container";
const App = () => {
return (
<div>
<h4>
{" "}
Using the <i> Container </i> Component of the Material UI to create a container in the React application {" "}
</h4>
<Container maxWidth = "xs">
<div style = {{ backgroundColor: "lightgreen", height: "30rem" }}> Hello </div>
</Container>
</div>
);
};
export default App;
Output
Example
In the example below, we have added two containers in the single div element. Also, we have set the display to flex for div elements, so both containers appear side by side.
Also, we have added some text content inside both containers and set the fixed width.
import React from "react";
import Container from "@mui/material/Container";
const App = () => {
return (
<div>
<h4>
{" "}
Using the <i> Container </i> Component of the Material UI to create a container in the React application {" "} </h4>
<div style = {{display: "flex", justifyContent: "space-around"}}>
<Container fixed>
<div style = {{ backgroundColor: "pink", height: "30rem", width: "90%" }}>
{" "}
This is a content of the container div. {" "}
</div>
</Container>
<Container fixed>
<div style = {{ backgroundColor: "pink", height: "30rem", width: "90%" }}>
{" "}
This is a content of the container div. {" "}
</div>
</Container>
</div>
</div>
);
};
export default App;
Output
Users learned to use the Container component of Material UI in ReactJS. We have seen two different examples of using the Container component. The Container component is fluid in the first example, and in the second example, it is fixed.
2K+ Views
