Skip to content

Paper API

API reference docs for the React Paper component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import Paper from '@mui/material/Paper';
// or
import { Paper } from '@mui/material';
You can learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
childrennode
The content of the component.
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
elevationinteger1
Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.
squareboolfalse
If true, rounded corners are disabled.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'elevation'
| 'outlined'
| string
'elevation'
The variant to use.

The ref is forwarded to the root element.

Theme default props

You can use MuiPaper to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

Rule nameGlobal classDescription
root.MuiPaper-rootStyles applied to the root element.
rounded.MuiPaper-roundedStyles applied to the root element unless square={true}.
outlined.MuiPaper-outlinedStyles applied to the root element if variant="outlined".
elevation.MuiPaper-elevationStyles applied to the root element if variant="elevation".
elevation0.MuiPaper-elevation0
elevation1.MuiPaper-elevation1
elevation2.MuiPaper-elevation2
elevation3.MuiPaper-elevation3
elevation4.MuiPaper-elevation4
elevation5.MuiPaper-elevation5
elevation6.MuiPaper-elevation6
elevation7.MuiPaper-elevation7
elevation8.MuiPaper-elevation8
elevation9.MuiPaper-elevation9
elevation10.MuiPaper-elevation10
elevation11.MuiPaper-elevation11
elevation12.MuiPaper-elevation12
elevation13.MuiPaper-elevation13
elevation14.MuiPaper-elevation14
elevation15.MuiPaper-elevation15
elevation16.MuiPaper-elevation16
elevation17.MuiPaper-elevation17
elevation18.MuiPaper-elevation18
elevation19.MuiPaper-elevation19
elevation20.MuiPaper-elevation20
elevation21.MuiPaper-elevation21
elevation22.MuiPaper-elevation22
elevation23.MuiPaper-elevation23
elevation24.MuiPaper-elevation24

You can override the style of the component using one of these customization options: