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.
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 DOM 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
- Style sheet name:
MuiPaper. - Style sheet details:
| 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:
- With a rule name of the
classesobject prop. - With a global class name.
- With a theme and an
overridesproperty.
If that's not sufficient, you can check the implementation of the component for more detail.