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 when working with Material UI—you can think of it as a<div> with extra built-in features, like access to your app's theme and thesx prop.

Usage

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

Basics

import Boxfrom'@mui/material/Box';

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

Customization

With the sx prop

Use thesx 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:

With MUI System props

- <Box mt={2} />+ <Box sx={{ mt: 2 }} />

Anatomy

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

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

API

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

• <Box />