React MUI Layout Components
Last Updated :
14 Mar, 2023
React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.
Layout components refer to a type of component that is used to organize the structure and layout of an application’s UI.
MUI provides various types of Layout Components:
Components
|
Description
|
Box |
This component provides a way to apply padding and margins to your content. |
Container |
This component provides a way to apply max-width and other layout styles to your content. |
Grid |
This component provides a way to arrange content in a grid of rows and columns. |
Stack |
This component refers to the layout strategy of stacking multiple UI elements on top of each other, either vertically or horizontally |
Image list |
This component is a grid-based display of images, typically used to show a collection of images in a grid with a specified number of columns. |
Hidden |
This component is a property that can be used to hide an element by setting its visibility to false. |
Installing React App: Use this command to create React App:
npx create-react-app example
Installing the MUI library in our app:
Use this command to set/install the MUI library in our app:
npm install @mui/material @emotion/react @emotion/styled
Importing the material UI library:
import Box from '@mui/material/Box';
Project Structure: Now your project structure should look like the following:
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Example: Changing Box from being ‘div’ to another component.
Javascript
import React from 'react' ;
import Box from "@mui/material/Box" ;
function App() {
return (
<div>
<Box component= 'h2' >
Hello GFG
</Box>
</div>
);
}
export default App;
|
Output:
Share your thoughts in the comments
Please Login to comment...