Open In App

React MUI Paper Surface

Improve
Improve
Like Article
Like
Save
Share
Report

React MUI is a UI library providing predefined robust and customizable components for React for easier web development. Material-UI 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.  

In this article, we are going to discuss the React MUI Paper Surface. The Paper is a UI component that implements the properties of paper and translates them to the screen.

MUI Paper Surface Variants: The variants to use. The default value is elevation.

  • Outlined: To show the border of the paper, square or rounded.
  • Elevation: It can be used to establish a hierarchy between other content. It accepts values between 0 and 24 inclusive. The default value is 1

Approach: Let us create a React project and install React MUI module. Then we will create a UI that will showcase React MUI Paper Surface.

Creating React Project:

Step 1: To create a react app, you need to install react modules through npx command.

npx create-react-app project_name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project_name

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

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

Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new component user makes or the code changes, we will be performing will be done in the source folder.  

Project Structure

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: We are creating a UI that shows different React MUI Paper Surface.

  • Filename: App.js

Javascript




import * as React from 'react';
import { Paper, Stack, Typography } from '@mui/material';
  
export default function Demo() {
    return (
        <div style={{
            margin: 100, padding: 20,
            backgroundColor: "grey"
        }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3 style={{ color: 'white' }}>
                <u>React MUI Paper</u>
            </h3>
            <Stack direction="row" spacing={2}>
                <Paper variant='outlined' rounded
                    style={{
                        width: 200, height: 100,
                        textAlign: "center"
                    }}>
                    <br /><br />
                    <Typography>
                        Varaint Outlined Rounded
                    </Typography>
                </Paper>
                <Paper variant='outlined'
                    square style={{
                        width: 200, height: 100,
                        textAlign: "center"
                    }}>
                    <br /><br />
                    <Typography>
                        Varaint Outlined Square
                    </Typography>
                </Paper>
            </Stack>
            <br /><br />
        </div>
    );
}


Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

Example 2: We are creating a UI that shows React MUI Paper Surface.

  • Filename: App.js

Javascript




import * as React from 'react';
import { Paper, Stack, Typography } from '@mui/material';
  
export default function Demo() {
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3><u>React MUI Paper</u></h3>
            <Stack direction="row" spacing={2}>
                <Paper elevation={0} style={{
                    width: 200, height: 100,
                    textAlign: "center"
                }}>
                    <Typography>Elevation 0</Typography>
                </Paper>
                <Paper elevation={4} style={{
                    width: 200, height: 100,
                    textAlign: "center"
                }}>
                    <Typography>Elevation 4</Typography>
                </Paper>
                <Paper elevation={12} style={{
                    width: 200, height: 100,
                    textAlign: "center"
                }}>
                    <Typography>Elevation 12</Typography>
                </Paper>
            </Stack>
        </div>
    );
}


Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

Reference: https://mui.com/material-ui/react-paper/



Last Updated : 17 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads