Skip to content
Edit this page

Paper API

The API documentation of the Paper React component. Learn more about the props and the CSS customization points.

Import

import Paper from '@material-ui/core/Paper';
// or
import { Paper } from '@material-ui/core';

You can learn more about the difference by reading this guide.

Component name

The MuiPaper name can be used for providing default props or style overrides at the theme level.

Props

Name Type Default Description
children node The content of the component.
classes object Override or extend the styles applied to the component. See CSS API below for more details.
component elementType 'div' The component used for the root node. Either a string to use a HTML element or a component.
elevation number 1 Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.
square bool false If true, rounded corners are disabled.
variant 'elevation'
| 'outlined'		 'elevation' The variant to use.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

CSS

Rule name Global class Description
root .MuiPaper-root Styles applied to the root element.
rounded .MuiPaper-rounded Styles applied to the root element if square={false}.
outlined .MuiPaper-outlined Styles applied to the root element if variant="outlined"
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 thanks to one of these customization points:

If that's not sufficient, you can check the implementation of the component for more detail.

Demos