Material UI Workshop - Box

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:

https://github.com/EntryLevelDeveloperTraining/material-ui-workshop

Getting Started

import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
  return (
    <Box p={5}>
      <Paper>
        Hello
      </Paper>
    </Box>
  );
}

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.

import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
  return (
    <Box p={5}>
      <Paper>
        <Box p={5}>
          <div>Hello</div>
        </Box>
      </Paper>
    </Box>
  );
}

Now the word Hello has some padding around it. Let's add another quick word under the Hello and give a padding top.

import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
  return (
    <Box p={5}>
      <Paper>
        <Box p={5}>
          <div>Hello</div>
          <Box pt={5}>
            World
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}

Breakpoints

You can also use Box to make your website more responsive by add breakpoints.

import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
  return (
    <Box p={{ xs: 2, sm: 3, md: 5 }}>
      <Paper>
        <Box p={5}>
          <div>Hello</div>
          <Box pt={5}>
            World
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}

By passing in an object you can specify different padding and different breakpoints.

{ xs: 2, sm: 3, md: 5 }

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.

Many other CSS properties

import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';

export default function BoxTest() {
  return (
    <Box p={{ xs: 2, sm: 3, md: 5 }}>
      <Paper>
        <Box p={5}>
          <div>Hello</div>
          <Box pt={5} textAlign="center">
            World
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}

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:

https://material-ui.com/components/box/