[epic] Paper #3
Description
In Material Design, a "paper" refers to a container that is used to hold content and that is designed to look like a sheet of paper. Papers are used to create a sense of depth and to visually separate content from the rest of the interface.
Papers in Material Design can be created using various HTML elements, such as div, span, or section, and styled using CSS. The Material Design guidelines provide a set of predefined classes that can be used to apply the desired visual styling to a paper.
Import
import Paper from '@mnui/material/Paper';
// or
import { Paper } from '@mnui/material';
Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The content of the component. | |
| 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 | Array<func, object, bool>, func, object |
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` epic for more details. | |
| variant | 'elevation', 'outlined', string |
'elevation' | The variant to use. |
The ref is forwarded to the root element.