SINGULARITY
DOCS
ReferenceThis Box renders as an HTML section element.
Box
The Box component serves as a versatile, theme-aware container with access to MUI System's CSS utilities.
Introduction
The Box component acts as a general-purpose container for organizing other components. It’s a core element in Material UI, functioning as an enhanced
<div> with built-in features like theme integration and the sx prop.Usage
The Box component is designed for flexible, multipurpose use, similar to a
<div>. Unlike other Material UI containers such as Container, Stack, and Paper, which are tailored for specific purposes (main layout orientation, one-dimensional layouts, and elevated surfaces, respectively), Box offers open-ended functionality.Basics
import Box from '@mui/material/Box';
By default, the Box component renders as a
<div>, but you can substitute it with any valid HTML tag or React component using the component prop. The example below demonstrates replacing the <div> with a <section> element:import * as React from 'react';
import Box from '@mui/material/Box';
export default function BoxBasic() {
return (
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
This Box renders as an HTML section element.
</Box>
);
}Customization
With the sx prop
Leverage the
sx prop to easily customize any Box instance with a comprehensive set of CSS properties, including access to MUI System’s style functions and theme-aware properties. The example below illustrates applying theme colors using this prop:import * as React from 'react';
import Box from '@mui/material/Box';
import { ThemeProvider } from '@mui/material/styles';
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>
);
}With MUI System props
MUI System props are deprecated and will be phased out in the next major release. It’s recommended to use the
sx prop instead.- <Box mt={2} />
+ <Box sx={{ mt: 2 }} />Anatomy
The Box component consists of a single root
<div> element:<div className="MuiBox-root"> </div>