zilly-ui/src/box/box.mdx

Zilly web react ui components

---
name: Box
---

import { Playground, Props, } from "docz";
import  Box  from "./box";
import Button from '../button';

# Box
The Box component serves as a wrapper component for most of the CSS utility needs.
This is based on the @material-ui/system package, thanks [@material-ui/system](https://material-ui.com/system/basics/)

## Props
|Property | Description | Type | Default |
:---|:---|:---|:---|
|children *	| Box render function or node. | ReactNode | - |
|clone | If true, the box will recycle its children DOM element. It's using React.cloneElement internally. | bool | false |
|component	| The component used for the root node. Either a string to use a DOM element or a component. | union: string \| func \| object |div |

The Box component packages [all the style functions](https://material-ui.com/system/basics/#all-inclusive) that are exposed in @material-ui/system. It's created using the [styled()](https://material-ui.com/styles/api/#styled-style-function-component) function of @material-ui/styles.


<Props of={Box} />

## Basic usage

he Box component wraps your component. It creates a new DOM element, a `<div>` by default that can be changed with the component property. Let's say you want to use a `<span>` instead:

<Playground>
        <Box mx={50}> mx 50</Box>   
        <Box color="red">
           hello
        </Box>
        
     
</Playground>

## Use clone 
However, sometimes you have to target the underlying DOM element. For instance, you want to change the text color of the button. The Button component defines its own color. CSS inheritance doesn't help. To workaround the problem, you can use Use `React.cloneElement()`
:

<Playground>
        <Box color="red" clone>
            <div className="h1 h2 h3">dawdawd</div>
        </Box>
</Playground>