Box

The Box component serves as a wrapper component for most of the CSS utility needs.

The Box component packages all the style functions that are exposed in @material-ui/system. It's created using the experimentalStyled() function of @material-ui/core/styles.

Example

The palette style function.

The sx prop

All system properties are available via the sx prop. In addition, the sx prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:

import * as React from 'react';
import Box from '@material-ui/core/Box';

export default function BoxSx() {
  return (
    <Box
      sx={{
        width: 300,
        height: 300,
        bgcolor: 'primary.dark',
        '&:hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
        },
      }}
    />
  );
}

Overriding Material-UI components

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

import * as React from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';

export default function BoxComponent() {
  return (
    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
      <Button>Save</Button>
    </Box>
  );
}

This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way.

However, sometimes you have to target the underlying DOM element. As an example, you may want to change the border of the Button. The Button component defines its own styles. CSS inheritance doesn't help. To workaround the problem, you can use the sx prop directly on the child if it is a Material-UI component.

-<Box sx={{ border: '1px dashed grey' }}>
-  <Button>Save</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>

For non-Material-UI components, use the component prop.

-<Box sx={{ border: '1px dashed grey' }}>
-  <button>Save</button>
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>

API

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

Name	Type	Default	Description
children	node		Box render function or node.
component	union: string |  func |  object	'div'	The component used for the root node. Either a string to use a DOM element or a component.
sx	object	{}	Accepts all system properties, as well as any valid CSS properties.

System props

As a CSS utility component, the Box also supports all system properties. You can use them as prop directly on the component. For instance, a margin-top:

<Box mt={2}>