What is the MUI Box component for?

EDIT: This was written in the MUI v4 days. In MUI v5, all MUI components allow you to define CSS styles via the sx prop, not just Box; but Box also accepts styling props at top-level, as well as within sx.

The other answers don’t really explain the motivation for using Box.

Box renders a <div> you can apply CSS styles to directly via React props, for the sake of convenience, since alternatives like separate CSS files, CSS-in-JS, or inline styles can be more typing and hassle to use.

For example, consider this component that uses JSS:

import * as React from 'react'

import { makeStyles } from '@material-ui/styles'

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: theme.spacing(1),
  }
}))

const Example = ({children, ...props}) => {
  const classes = useStyles(props);

  return (
    <div className={classes.root}>
      {children}
    </div>
  )
}

It’s much shorter to do this with Box by passing the props you want to it:

import * as React from 'react'

import Box from '@material-ui/core/Box'

const Example = ({children}) => (
  <Box display="flex" flexDirection="column" alignItems="stretch" padding={1}>
    {children}
  </Box>
)

Notice also how padding={1} is a shorthand for theme.spacing(1). Box provides various conveniences for working with Material-UI themes like this.

In larger files it can be more of a hassle to jump back and forth from the rendered elements to the styles than if the styles are right there on the element.

Cases where you wouldn’t want to use Box (MUI v4):

• You want the enclosing component to be able to override styles by passing classes (makeStyles enables this. <Example classNames={{ root: 'alert' }} /> would work in the makeStyles example, but not the Box example.)
• You need to use nontrivial selectors (example JSS selectors: $root > li > a, $root .third-party-class-name)