Box component in material UI reactjs library

How to import:

Box is in material-ui/core package. Below is the complete import statement for it:

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

or

import { Box } from "@material-ui/core";

and we can use it like:

import { Box } from "@material-ui/core";

function App() {
  return <Box></Box>;
}

export default App;

If you inspect the Box component, it is actually a div component.

Adding width, height and background color:

Using bgcolor, width and height, we can give background color, width and height to a Box:

For example:

import { Box } from "@material-ui/core";

function App() {
  return (
    <Box
      bgcolor="red"
      width={200}
      height={200}
      style={{ marginTop: 300, marginLeft: 300 }}
    ></Box>
  );
}

export default App;

This will create one red box:

We can also add screen breakpoints. For example:

 <Box
      bgcolor={{xs: 'blue', md: 'red'}}
      width={200}
      height={200}
      style={{ marginTop: 300, marginLeft: 300 }}
></Box>

It will show red box for screen size md and above. And, for smaller screens than md, it will show blue box.

component:

By default, Box is a div. But we can also change it to any other component using component props.

For example:

<Box
      width={200}
      component='span'
      height={200}
></Box>

It will change it to span.

Adding child:

We can add other components inside Box component:

import { Box, Button } from "@material-ui/core";

function App() {
  return (
    <Box width={200} height={200}>
      <Button>Click Me !!</Button>
    </Box>
  );
}

export default App;

This example will add one Button in the Box. Similarly, we can add any other component.