React MUI Layout Components

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: