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' }}> neveropen </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' }}>neveropen</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/
