Box

The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

Introduction

The Box component is a generic container for grouping other components. It's a fundamental building block—you can think of it as a <div> with special features (like access to your app's theme and the sx prop).

Basics

import Box from '@mui/system/Box';

The Box component renders as a <div> by default, but you can swap in any other valid HTML tag or React component using the component prop. The demo below replaces the <div> with a <section> element:

This is a section container

import * as React from 'react';
import Box from '@mui/system/Box';

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      This is a section container
    </Box>
  );
}

import * as React from 'react';
import Box from '@mui/system/Box';

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      This is a section container
    </Box>
  );
}

Press Enter to start editing

Component

Using the sx prop

Use the sx prop to quickly customize any Box instance using a superset of CSS with access to all the style functions and theme-aware properties exposed in the MUI System package.

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

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

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

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

Press Enter to start editing

System props

As a CSS utility component, the Box supports all MUI System properties. You can use them as prop directly on the component.

<Box height={20} width={20} my={4} display="flex" alignItems="center" gap={4}>

Create your own Box component

Use the createBox() utility to create your version of the Box component. This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:

import { createBox, createTheme } from '@mui/system';

const defaultTheme = createTheme({
  // your custom theme values
});

const Box = createBox({ defaultTheme });

export default Box;

API

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

<Box />