React MUI Shadows

Last Updated : 26 Sep, 2022

Material UI is an open-source design framework that showcases different components made in react. It is developed and maintained by Google since 2014.

What is Shadows API offered by Material UI?

The Shadows API, provided by MUI, allows us to add or remove box shadows to the DOM elements that have box-shadow utilities.

Shadows API props:

boxShadow: It denotes the box-shadow the DOM element it is passed to.

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. foldername, 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 @mui/system

Project Structure: It will look like the following.

Example 1: Now, let’s create a simple application that utilizes Shadows API by giving us different box shadows on different DOM elements. Change your App.js like below:

App.js

import * as React from 'react'; 
import Grid from '@mui/material/Grid'; 
import Box from '@mui/material/Box'; 
  
export default function App() { 
    return ( 
        <Grid container> 
            <Box 
                sx={{ 
                    boxShadow: 0, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 0 
            </Box> 
            <Box 
                sx={{ 
                    boxShadow: 1, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 1 
            </Box> 
            <Box 
                sx={{ 
                    boxShadow: 2, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 2 
            </Box> 
            <Box 
                sx={{ 
                    boxShadow: 3, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 3 
            </Box> 
        </Grid> 
    ); 
} 

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: Now, let’s increase the boxShadow number to see the significant increase in box shadows of the DOM elements. Change your App.js like below:

App.js

import * as React from 'react'; 
import Grid from '@mui/material/Grid'; 
import Box from '@mui/material/Box'; 
  
export default function App() { 
    return ( 
        <Grid container> 
            <Box 
                sx={{ 
                    boxShadow: 6, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 6 
            </Box> 
            <Box 
                sx={{ 
                    boxShadow: 7, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 7 
            </Box> 
            <Box 
                sx={{ 
                    boxShadow: 8, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 8 
            </Box> 
            <Box 
                sx={{ 
                    boxShadow: 9, 
                    width: '140px', 
                    height: '140px', 
                    p: 1, 
                    m: 1, 
                    textAlign: 'center', 
                    fontSize: '14px', 
                }} 
            > 
                boxShadow: 9 
            </Box> 
        </Grid> 
    ); 
} 