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 @mui/system.

Example

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, ThemeProvider } from '@mui/system';

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

import * as React from 'react';
import { Box, ThemeProvider } from '@mui/system';

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

Press Enter to start editing

Overriding MUI 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 '@mui/system';
import Button from '@mui/material/Button';

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

import * as React from 'react';
import { Box } from '@mui/system';
import Button from '@mui/material/Button';

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

Press Enter to start editing

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 an MUI component.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box sx={{ border: '1px dashed grey' }}>
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;Button>Save&lt;/Button>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/Box>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Button sx={{ border: '1px dashed grey' }}>Save&lt;/Button></span></span>

For non-MUI components, use the component prop.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;Box sx={{ border: '1px dashed grey' }}>
</span><span class="token prefix deleted">-</span><span class="token line">  &lt;button>Save&lt;/button>
</span><span class="token prefix deleted">-</span><span class="token line">&lt;/Box>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;Box component="button" sx={{ border: '1px dashed grey' }}>Save&lt;/Box></span></span>

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:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">mt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

Create your own `Box` component

If you want to have a different default theme for the Box component, you can create your own version of it, using the createBox() utility.

<span class="token keyword">import</span> <span class="token punctuation">{</span> createBox<span class="token punctuation">,</span> createTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/system'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> defaultTheme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// your custom theme values</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Box <span class="token operator">=</span> <span class="token function">createBox</span><span class="token punctuation">(</span><span class="token punctuation">{</span> defaultTheme <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Box<span class="token punctuation">;</span>

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Box />

Box

Example

The sx prop

Overriding MUI components

System props

Create your own Box component

API

The `sx` prop

Create your own `Box` component