react-test/docs/data/system/components/box/box.md

productId, title, components, githubLabel

productId	title	components	githubLabel
system	React Box component	Box	component: Box

Box

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

{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}

Introduction

The Box component is a generic container for grouping other components. It's a fundamental building block when working with MUI System—you can think of it as a <div> with extra built-in features, like access to your app's theme and the sx prop.

Usage

The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a <div>. Components like Container and Stack, by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts.

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:

{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}

Customization

With MUI System props

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

{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}

With the sx prop

Use the sx prop to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. The demo below shows how to apply colors from the theme using this prop:

{{"demo": "BoxSx.js", "defaultCodeOpen": true }}

Create your own Box

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;

Anatomy

The Box component is composed of a single root <div> element:

<div className="MuiBox-root">
  <!-- contents of the Box -->
</div>