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.
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
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
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/