React MUI Paper API

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI Paper API. The Paper is a UI component that implements the properties of paper and translated it to the screen. The API provides a lot of functionality and we will learn to implement them.

Import Paper API:

import Paper from '@mui/material/Paper';
// or
import { Paper } from '@mui/material';

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

• children(node): The content of the component.
• classes(object): This overrides the existing styles or adds new styles to the component.
• component(elementType): It is the component used for the root node.
• elevation(integer): Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive. The default value is 1.
• square(bool): If set to true, the rounded corners are disabled. The default value is false.
• sx( Array<func / object / bool>/ func / object): The system prop allows defining system overrides as well as additional CSS styles. 
• variant(elevation/outlined): The variant to use. The default value is elevation.

CSS Rules:

• root(.MuiPaper-root): It is the style applied to the root element.
• rounded(.MuiPaper-rounded): It is the style applied to the root element unless the square is set to true.
• outlined(.MuiPaper-outlined): It is the style applied to the root element if variant is set to outlined.
• elevationX(.MuiPaper-elevationX): It is the style applied to the root element if variant elevation. The X value ranges from 0-24.

Syntax: Create ListItem as follows.

<Paper elevation={3} />

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure: 

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have a Paper component with different elevations.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import { Typography } from "@mui/material";
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Paper API</strong>
            </div>
            <br />
            <center>
                <Box
                    sx={{
                        display: "flex",
                        flexWrap: "wrap",
                        margin: "auto",
                        width: "fit-content",
                        "& > :not(style)": {
                            m: 1,
                            width: 200,
                            height: 200,
                        },
                    }}
                >
                    <Paper elevation={1}>
                        <Typography>
                            Elevation 1
                        </Typography>
                    </Paper>
                    <Paper elevation={3}>
                        <Typography>
                            Elevation 3
                        </Typography>
                    </Paper>
                    <Paper elevation={7}>
                        <Typography>
                            Elevation 7
                        </Typography>
                    </Paper>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have a Paper component with different variations.

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import { Typography } from "@mui/material";
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Paper API</strong>
            </div>
            <br />
            <center>
                <Box
                    sx={{
                        display: "flex",
                        flexWrap: "wrap",
                        margin: "auto",
                        width: "fit-content",
                        "& > :not(style)": {
                            m: 1,
                            width: 200,
                            height: 200,
                        },
                    }}
                >
                    <Paper elevation={3}
                        variant="outlined">
                        <Typography>
                            Outlined Rounded
                        </Typography>
                    </Paper>
                    <Paper elevation={3}
                        variant="outlined" square>
                        <Typography>
                            Outlined Squared
                        </Typography>
                    </Paper>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

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