Material UI Box is a wrapper component that is useful to quickly add CSS styles to your components without having to create a lot of classes. In this article we will go over how to use Box to quickly give padding and other CSS to our components.
For those that just want to get into the code here is the repo:
<a href="https://github.com/EntryLevelDeveloperTraining/material-ui-workshop">https://github.com/EntryLevelDeveloperTraining/material-ui-workshop</a>
<h2>Getting Started</h2>
<pre><code class="hljs language-javascript">import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
 return (
 &#x3C;Box p={5}>
 &#x3C;Paper>
 Hello
 &#x3C;/Paper>
 &#x3C;/Box>
 );
}</code></pre>
First let's bring in the Box and Paper component. Then we will setup a Box with p={5} meaning to give 5 padding to the entire Box, top, right, bottom, and left. Inside the Box is a Paper element with the word Hello.
When this page is rendered it will show that the Paper element wont be touching the the whole window but will have a padding around it. However inside the Paper the word Hello is touching the edges so let's add a Box in the Paper component.
<pre><code class="hljs language-javascript">import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
 return (
 &#x3C;Box p={5}>
 &#x3C;Paper>
 &#x3C;Box p={5}>
 &#x3C;div>Hello&#x3C;/div>
 &#x3C;/Box>
 &#x3C;/Paper>
 &#x3C;/Box>
 );
}</code></pre>
Now the word Hello has some padding around it. Let's add another quick word under the Hello and give a padding top.
<pre><code class="hljs language-javascript">import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
 return (
 &#x3C;Box p={5}>
 &#x3C;Paper>
 &#x3C;Box p={5}>
 &#x3C;div>Hello&#x3C;/div>
 &#x3C;Box pt={5}>
 World
 &#x3C;/Box>
 &#x3C;/Box>
 &#x3C;/Paper>
 &#x3C;/Box>
 );
}</code></pre>
<h2>Breakpoints</h2>
You can also use Box to make your website more responsive by add breakpoints.
<pre><code class="hljs language-javascript">import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
 return (
 &#x3C;Box p={{ xs: 2, sm: 3, md: 5 }}>
 &#x3C;Paper>
 &#x3C;Box p={5}>
 &#x3C;div>Hello&#x3C;/div>
 &#x3C;Box pt={5}>
 World
 &#x3C;/Box>
 &#x3C;/Box>
 &#x3C;/Paper>
 &#x3C;/Box>
 );
}</code></pre>
By passing in an object you can specify different padding and different breakpoints.
<pre><code class="hljs language-javascript">{ xs: 2, sm: 3, md: 5 }</code></pre>
This will say on mobile we want a padding of 2, on small screens like tablets we want 3, and on medium size screens we want 5.
<h2>Many other CSS properties</h2>
<pre><code class="hljs language-javascript">import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
 return (
 &#x3C;Box p={{ xs: 2, sm: 3, md: 5 }}>
 &#x3C;Paper>
 &#x3C;Box p={5}>
 &#x3C;div>Hello&#x3C;/div>
 &#x3C;Box pt={5} textAlign="center">
 World
 &#x3C;/Box>
 &#x3C;/Box>
 &#x3C;/Paper>
 &#x3C;/Box>
 );
}</code></pre>
You can add textAlign, display, fontFamily, fontWeight, and tons of other CSS properties without having to write a ton of custom CSS classes, making it cleaner and easier to handle.
To learn more you can visit the Material UI website:
<a href="https://material-ui.com/components/box/">https://material-ui.com/components/box/</a>

In this article we will be going over how to use Material UI Box and how we can use the component to quickly style components.

Material UI Workshop - Box

This course requires a subscription to view