Paper API
The API documentation of the Paper React component. Learn more about the props and the CSS customization points.
import { Paper } from '@material-ui/core';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. |
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}. |
| 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.
Notes
The component is fully StrictMode compatible.