React MUI Understand MUI Packages

Last Updated : 02 Feb, 2023

MUI is the abbreviation for “Material-UI”, which is a popular React-based UI library that provides a set of React components with a wide range of specifications. MUI packages provide a set of components implementing the Material Design guidelines. These components include UI elements such as buttons, forms, and navigation elements that are designed to look and feel like Google’s Material Design. MUI provides a way for developers to easily add a consistent, modern design to their web applications while also providing a set of powerful features and customization options.

Understanding MUI Packages:

Overview: It refers to a summary or general description of a package or component. It provides a high-level view of what the package or component does, its features, and how it can be used in an application. Example @mui/material, @mui/base, etc.
MUI packages: MUI packages are the collection of components and styles that make up the MUI library. It provides a set of React components that follow Material Design principles, allowing developers to create beautiful, responsive, and accessible user interfaces with ease.
Component Libraries: A component library is a collection of pre-built UI components that can be easily reused across projects. In the context of MUI, the component library refers to the set of React components that are provided as part of the MUI framework.
Styling: It refers to the process of defining the visual appearance of the components in the library. MUI provides a set of CSS classes that can be applied to its components to control their appearances, such as colors, typography, spacing, and more.

Creating a react application:

Step 1: Create React app by writing the below code in any command line.

npx create-react-app app_name

Step 2: Then, we have to move into the folder we will be working on.

cd project_name

Step 3: We will be installing the @mui/material library for working on our project.

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

Project Structure: After creating React App and installing all the dependencies, the folder structure will look similar to the figure given below.

Folder Structure

Step to run the application: Write the below code in the terminal to run the server:

npm start

Example 1: Below is the code for using the ‘unstyled’ button component with ‘styled’ CSS.

App.js

Javascript

import { styled } from '@mui/material/styles'; 
import ButtonUnstyled, { buttonUnstyledClasses }  
    from "@mui/base/ButtonUnstyled"; 
import { red, grey } from '@mui/material/colors'; 
  
const Root = styled(ButtonUnstyled)(({ theme }) => ` 
  font-weight: bold; 
  font-size: 20px; 
  background-color: white; 
  padding: 10px 20px; 
  border-radius: 8px; 
  color: ${red[500]}; 
  cursor: pointer; 
  border: 1px solid red; 
  margin: 20px; 
  
  &:hover { 
    background-color: ${red[600]}; 
    color: white; 
  } 
  
  &.${buttonUnstyledClasses.active} { 
    background-color: ${red[700]}; 
  } 
  
  &.${buttonUnstyledClasses.focusVisible} { 
    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 
    0 0 0 5px rgba(0, 127, 255, 0.5); 
    outline: none; 
  } 
  
  &.${buttonUnstyledClasses.disabled} { 
    opacity: 0.5; 
    background-color: ${grey[600]}; 
    color: black; 
    border: 1px solid grey; 
    cursor: initial; 
  } 
  `, 
); 
  
  
const CustomButton = () => { 
    const label = { slotProps: { input: { 'aria-label': 'button' } } }; 
  
    return ( 
        <div> 
            <div> 
                <ButtonUnstyled component={Root} {...label}> 
                    Unstyled Button with Styling</ButtonUnstyled> 
                <ButtonUnstyled>Unstyled Button</ButtonUnstyled> 
            </div> 
            <div> 
                <ButtonUnstyled component={Root} {...label}  
                    disabled>Unstyled Disabled Button with Styling 
                </ButtonUnstyled> 
                <ButtonUnstyled disabled> 
                    Unstyled Disabled Button 
                </ButtonUnstyled> 
            </div> 
        </div> 
    ) 
} 
  
export default CustomButton; 

Output:

Usage of MUI’s material, base, and styling packages

Example 2: Below is the code for using Advance components like Data-grid with custom CSS.

App.js

Javascript

import * as React from 'react'; 
import Box from '@mui/material/Box'; 
import { DataGrid } from '@mui/x-data-grid'; 
import { yellow, blue } from '@mui/material/colors'; 
  
const columns = [ 
    { 
        field: 'id', headerName: 'ID', minWidth: 100, align: 'center', 
        headerAlign: 'center', flex: 1 
    }, 
    { 
        field: 'type', 
        headerName: 'Type', 
        editable: true, 
        minWidth: 150, 
        align: 'center', 
        headerAlign: 'center', 
        flex: 1 
    }, 
    { 
        field: 'name', 
        headerName: 'Name', 
        editable: true, 
        minWidth: 150, 
        align: 'center', 
        headerAlign: 'center', 
        flex: 1 
    }, 
    { 
        field: 'price', 
        headerName: 'Price(₹/kg)', 
        type: 'number', 
        editable: true, 
        minWidth: 150, 
        align: 'center', 
        headerAlign: 'center', 
        flex: 1 
    }, 
]; 
  
const rows = [ 
    { id: 1, type: 'Vegetable', name: 'Potato', price: 35 }, 
    { id: 2, type: 'Grocery', name: 'Flour', price: 30 }, 
    { id: 3, type: 'Vegetable', name: 'Tomato', price: 50 }, 
    { id: 4, type: 'Fruit', name: 'Orange', price: 100 }, 
    { id: 5, type: 'Vegetable', name: 'Brinjal', price: 43 }, 
    { id: 6, type: 'Vegetable', name: 'LadyFinger', price: 87 }, 
    { id: 7, type: 'Fruit', name: 'Apple', price: 120 }, 
    { id: 8, type: 'Grocery', name: 'Rice', price: 80 }, 
]; 
  
const DataGridDemo = () => { 
    return ( 
        <Box sx={{ height: 400, width: '98%',  
            boxShadow: 2, margin: '10px' }}> 
            <DataGrid 
                rows={rows} 
                columns={columns} 
                pageSize={10} 
                rowsPerPageOptions={[5]} 
                disableSelectionOnClick 
                sx={{ 
                    '& .MuiDataGrid-cell:hover': { 
                        color: 'white', 
                        backgroundColor: blue[700] 
                    }, 
                    "& .MuiDataGrid-columnHeaders": { 
                        backgroundColor: yellow[500], 
                        fontSize: 16, 
                        color: 'purple'
                    }, 
                    "& .MuiDataGrid-virtualScrollerRenderZone": { 
                        "& .MuiDataGrid-row": { 
                            "&:nth-child(2n)":  
                                { backgroundColor: blue[500] } 
                        } 
                    } 
                }} 
            /> 
        </Box> 
    ); 
} 
  
export default DataGridDemo;