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

Import

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

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 classes 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 classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiPaper-elevationelevationStyles applied to the root element if variant="elevation".
.MuiPaper-elevation0elevation0Styles applied to the root element if elevation={0}.
.MuiPaper-elevation1elevation1Styles applied to the root element if elevation={1}.
.MuiPaper-elevation10elevation10Styles applied to the root element if elevation={10}.
.MuiPaper-elevation11elevation11Styles applied to the root element if elevation={11}.
.MuiPaper-elevation12elevation12Styles applied to the root element if elevation={12}.
.MuiPaper-elevation13elevation13Styles applied to the root element if elevation={13}.
.MuiPaper-elevation14elevation14Styles applied to the root element if elevation={14}.
.MuiPaper-elevation15elevation15Styles applied to the root element if elevation={15}.
.MuiPaper-elevation16elevation16Styles applied to the root element if elevation={16}.
.MuiPaper-elevation17elevation17Styles applied to the root element if elevation={17}.
.MuiPaper-elevation18elevation18Styles applied to the root element if elevation={18}.
.MuiPaper-elevation19elevation19Styles applied to the root element if elevation={19}.
.MuiPaper-elevation2elevation2Styles applied to the root element if elevation={2}.
.MuiPaper-elevation20elevation20Styles applied to the root element if elevation={20}.
.MuiPaper-elevation21elevation21Styles applied to the root element if elevation={21}.
.MuiPaper-elevation22elevation22Styles applied to the root element if elevation={22}.
.MuiPaper-elevation23elevation23Styles applied to the root element if elevation={23}.
.MuiPaper-elevation24elevation24Styles applied to the root element if elevation={24}.
.MuiPaper-elevation3elevation3Styles applied to the root element if elevation={3}.
.MuiPaper-elevation4elevation4Styles applied to the root element if elevation={4}.
.MuiPaper-elevation5elevation5Styles applied to the root element if elevation={5}.
.MuiPaper-elevation6elevation6Styles applied to the root element if elevation={6}.
.MuiPaper-elevation7elevation7Styles applied to the root element if elevation={7}.
.MuiPaper-elevation8elevation8Styles applied to the root element if elevation={8}.
.MuiPaper-elevation9elevation9Styles applied to the root element if elevation={9}.
.MuiPaper-outlinedoutlinedStyles applied to the root element if variant="outlined".
.MuiPaper-rootrootStyles applied to the root element.
.MuiPaper-roundedroundedStyles applied to the root element unless square={true}.

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

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.