Paper API
API documentation for the React Paper component. Learn about the available props and the CSS API.
Import
import Paper from '@mui/material/Paper';
// or
import { Paper } from '@mui/material';Component name
The nameMuiPaper can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| 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 | The component used for the root node. Either a string to use a HTML element or a component. | |
| elevation | integer | 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. |
| sx | 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.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiPaper-root | Styles applied to the root element. |
| rounded | .MuiPaper-rounded | Styles applied to the root element unless square={true}. |
| outlined | .MuiPaper-outlined | Styles applied to the root element if variant="outlined". |
| elevation | .MuiPaper-elevation | Styles 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:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.