React MUI Components

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

One of the main advantages of using MUI is that it allows developers to quickly and easily create professional-looking interfaces without having to spend a lot of time on design. The library includes a wide range of components, including buttons, forms, layout grids, and more, all of which are designed to be fully customizable and adaptable to different use cases.

MUI provides various types of components:

Component Type	Description
Input	The Input components in MUI is a standard input field that can be used to gather information from the user.
Data display	These components provide a convenient and consistent way to display data and information in your Material-UI-based applications.
Feedback	It refers to a set of components that provide ways to communicate the outcome of an action to the user.
Surface	It refers to a type of component that provides a container for other UI elements.
Navigation	It refers to a type of component that is used to create navigation interfaces for an application.
Layout	It refers to a type of component that is used to organize the structure and layout of an application’s UI.
Utils	Utils refer to a set of utility functions and components that enhance the functionality and user experience of the MUI library.
Data grid	A data grid, also known as a data table, is a UI component for displaying large amounts of structured data in a tabular format. It typically includes columns for different data fields, rows for individual data records, and features for sorting, filtering, pagination, selection, and more.
Labs	It is a collection of experimental components and tools that are developed and maintained by the Material-UI team. It provides a platform for exploring new and innovative ideas for user interface components.

Syntax: Button component syntax:

import { Button } from '@mui/material';

function App() {
    return (
        <Button variant="contained" color="primary">
            Click Me
        </Button>
    );
}

export default App;

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

Project Structure: It will look like the following.

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: In this example, we will make a card that contains textfield & button components.

• Filename: App.js

Javascript

import * as React from "react";
import {
    Button,
    Card,
    CardMedia,
    CardActions,
    CardContent,
    TextField,
} from "@mui/material";

export default function Demo() {
    return (
        <div>
            <Card raised={true} sx={{ maxWidth: 400 }}>
                <CardMedia
                    component="img"
                    height="200"
                    image=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                    alt="GFG Logo"
                />
                <CardContent sx={{ bgcolor: "#E8E8E8" }}>
                    <h3>Top interview Questions</h3>
                    <h4 style={{ color: "green" }}>
                        As the placement season is back so are we to
                        help you ace the interview. We have selected
                        some most commonly asked and must do practice
                        problems for you. You can also take part in
                        our mock placement contests which will help
                        you learn different topics and practice at
                        the same time, simulating the feeling of a
                        real placement test environment.
                    </h4>
                </CardContent>
                <CardActions>
                    <TextField
                        id="outlined-basic"
                        label="Referral code"
                        variant="outlined"
                    />
                    <Button variant="contained" color="primary">
                        Share
                    </Button>
                    <Button variant="contained" color="success">
                        Enroll
                    </Button>
                </CardActions>
            </Card>
        </div>
    );
}

Output:

Example 2: In this example, we will create a drawer that opens above all the content of the page like a modal with a backdrop. We will use components like Drawers & Buttons.

• Filename: App.js

Javascript

import * as React from "react";
import Drawer from "@mui/material/Drawer";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";

export default function App() {
    const [open, setOpen] = React.useState(false);

    function handleOpen() {
        setOpen(!open);
    }

    function handleClose() {
        setOpen(false);
    }

    return (
        <>
            <Button onClick={handleOpen}
                    variant="outlined"
                    color="success">
                Open Drawer
            </Button>
            <Drawer anchor={"left"}
                    open={open}
                    onClose={handleClose}>
                <MenuItem>
                    <h1>GeeksForGeeks</h1>
                </MenuItem>
                <MenuItem>My profile</MenuItem>
                <MenuItem>Saved articles</MenuItem>
                <MenuItem>Saved Videos</MenuItem>
                <MenuItem>Courses</MenuItem>
                <MenuItem>Logout</MenuItem>
            </Drawer>
        </>
    );
}

Output:

Reference: https://mui.com/components/