React MUI Box

Material-UI (MUI) is an open-source user interface library of UI components that provides predefined and customizable React components for faster web development with ease. These Material-UI components follow Google’s guidelines for creating components. In this article, we will discuss Box in the Material-UI library.

React MUI Box Component: The Box component of MUI renders a <div> such that you can apply CSS styles directly via React props. It does such for the sake of convenience because the other alternative is like having separate CSS files or inline styles which can be more of typing and very hassle to use and read. The Box component serves as a wrapper component for most of the CSS utility needs.

Syntax:

<Box component='button'>Save</Box>

Installing React App:

Step I: Use this command to create React App:

npx create-react-app example

Installing the MUI library in our app:

Use this command to set/install the MUI library in our app:

npm install @mui/material @emotion/react @emotion/styled

Importing the material UI library:

import Box from '@mui/material/Box';

Props:

• component: The component used for the root node. Either a string to use an HTML element or a component.
• sx: The system prop that allows defining system overrides as well as additional CSS styles. All system properties are available via the sx prop. 

Project Structure: Now your project structure should look like the following:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example: Changing Box from being ‘div’ to another component.

App.js

import React from 'react';
import Box from "@mui/material/Box";

function App() {
    return (
        <div>
            <Box component='h2'>
                Hello GFG
            </Box>
        </div>
    );
}

export default App;

Output : 

Example: Configuration of Box on different breakpoints. The box will change its color on different breakpoints.

App.js

import React from 'react';
import Box from "@mui/material/Box";

function App() {
    return (
        <div>
            <Box width={100} height={100}
                bgcolor={{
                    xs: "red",
                    md: "blue"
                }}>
            </Box>
        </div>
    );
}

export default App;

Output : 

Reference: https://mui.com/material-ui/api/box/