Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/188.a6df94a4.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[188],{2567:function(e,t,n){"use strict";n.r(t);var c=n(118),s=n(1098),a=n(1090),o=n(194),l=n(1072),r=n(1);const i=Object(l.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return i(),Object(r.jsxs)(r.Fragment,{children:[Object(r.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(r.jsxs)(s.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/box",target:"_blank",role:"button",children:[Object(r.jsx)(a.a,{children:"link"}),Object(r.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(r.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Box"}),Object(r.jsx)(o.a,{className:"description",children:"The Box component serves as a wrapper component for most of the CSS utility needs."}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["The Box component packages"," ",Object(r.jsx)("a",{href:"/system/basics/#all-inclusive",children:"all the style functions"})," that are exposed in"," ",Object(r.jsx)("code",{children:"@material-ui/system"}),". It's created using the"," ",Object(r.jsx)("a",{href:"/styles/api/#styled-style-function-component",children:Object(r.jsx)("code",{children:"styled()"})})," ","function of ",Object(r.jsx)("code",{children:"@material-ui/core/styles"}),"."]}),Object(r.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Example"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(r.jsx)("a",{href:"/system/palette/",children:"The palette"})," style function."]}),Object(r.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Overriding Material-UI components"}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["The Box component wraps your component. It creates a new DOM element, a"," ",Object(r.jsx)("code",{children:"<div>"})," by default that can be changed with the ",Object(r.jsx)("code",{children:"component"})," ","property. Let's say you want to use a ",Object(r.jsx)("code",{children:"<span>"})," instead:"]}),Object(r.jsx)(c.a,{component:"pre",className:"language-jsx",children:' \n<Box component="span" m={1}>\n <Button />\n</Box>\n'}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way."}),Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"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 have two options:"}),Object(r.jsx)("ol",{children:Object(r.jsxs)("li",{children:["Use"," ",Object(r.jsx)("a",{href:"https://reactjs.org/docs/react-api.html#cloneelement",children:Object(r.jsx)("code",{children:"React.cloneElement()"})})]})}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["The Box component has a ",Object(r.jsx)("code",{children:"clone"})," property to enable the usage of the clone element method of React."]}),Object(r.jsx)(c.a,{component:"pre",className:"language-jsx",children:' \n<Box color="text.primary" clone>\n <Button />\n</Box>\n'}),Object(r.jsx)("ol",{start:"2",children:Object(r.jsx)("li",{children:"Use render props"})}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["The Box children accepts a render props function. You can pull out the"," ",Object(r.jsx)("code",{children:"className"}),"."]}),Object(r.jsx)(c.a,{component:"pre",className:"language-jsx",children:' \n<Box color="text.primary">\n {props => <Button {...props} />}\n</Box>\n'}),Object(r.jsx)("blockquote",{children:Object(r.jsx)(o.a,{className:"mb-16",component:"div",children:"\u26a0\ufe0f The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last."})}),Object(r.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"API"}),Object(r.jsx)(c.a,{component:"pre",className:"language-jsx",children:" \nimport Box from '@material-ui/core/Box';\n"}),Object(r.jsxs)("table",{children:[Object(r.jsx)("thead",{children:Object(r.jsxs)("tr",{children:[Object(r.jsx)("th",{align:"left",children:"Name"}),Object(r.jsx)("th",{align:"left",children:"Type"}),Object(r.jsx)("th",{align:"left",children:"Default"}),Object(r.jsx)("th",{align:"left",children:"Description"})]})}),Object(r.jsxs)("tbody",{children:[Object(r.jsxs)("tr",{children:[Object(r.jsx)("td",{align:"left",children:Object(r.jsx)("span",{className:"prop-name required",children:"children\xa0*"})}),Object(r.jsx)("td",{align:"left",children:Object(r.jsxs)("span",{className:"prop-type",children:["union:\xa0node\xa0|",Object(r.jsx)("br",{}),"\xa0func",Object(r.jsx)("br",{})]})}),Object(r.jsx)("td",{align:"left"}),Object(r.jsx)("td",{align:"left",children:"Box render function or node."})]}),Object(r.jsxs)("tr",{children:[Object(r.jsx)("td",{align:"left",children:Object(r.jsx)("span",{className:"prop-name",children:"clone"})}),Object(r.jsx)("td",{align:"left",children:Object(r.jsx)("span",{className:"prop-type",children:"bool"})}),Object(r.jsx)("td",{align:"left",children:Object(r.jsx)("span",{className:"prop-default",children:"false"})}),Object(r.jsxs)("td",{align:"left",children:["If ",Object(r.jsx)("code",{children:"true"}),", the box will recycle its children DOM element. It's using"," ",Object(r.jsx)("code",{children:"React.cloneElement"})," internally."]})]}),Object(r.jsxs)("tr",{children:[Object(r.jsx)("td",{align:"left",children:Object(r.jsx)("span",{className:"prop-name",children:"component"})}),Object(r.jsx)("td",{align:"left",children:Object(r.jsxs)("span",{className:"prop-type",children:["union:\xa0string\xa0|",Object(r.jsx)("br",{}),"\xa0func\xa0|",Object(r.jsx)("br",{}),"\xa0object",Object(r.jsx)("br",{})]})}),Object(r.jsx)("td",{align:"left",children:Object(r.jsx)("span",{className:"prop-default",children:"'div'"})}),Object(r.jsx)("td",{align:"left",children:"The component used for the root node. Either a string to use a DOM element or a component."})]})]})]}),Object(r.jsxs)(o.a,{className:"mb-16",component:"div",children:["Any other properties supplied will be used by"," ",Object(r.jsx)("a",{href:"/system/basics/#all-inclusive",children:"the style functions"})," or spread to the root element."]})]})}}}]);
Mini Shell