[epic] Box #4
Description
in Material Design, a "box" refers to a container that is used to hold content. Boxes are used to group related items together and to apply visual styling, such as background colors, borders, and shadows.
Boxes 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 box.
Import
import Box from '@mnui/material/Box';
// or
import { Box } from '@mnui/material';
Props
Props will be extended from paper also the native component is 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.