React MUI Box

Material-UI （MUI）是一个开源用户界面库，提供预定义和可自定义的React组件，以便更轻松地进行Web开发。这些Material-UI组件遵循Google的组件创建指南。在本文中，我们将讨论Material-UI库中的Box组件。

React MUI Box组件 ：MUI的Box组件呈现一个<div>，您可以通过React属性直接应用CSS样式。这样做出于方便起见，因为其他的选择是使用单独的CSS文件或内联样式，这样可能更加繁琐且难以使用和阅读。Box组件用作大多数CSS实用程序需求的包装器组件。

语法：

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

安装React应用：

步骤1： 使用以下命令创建React应用：

npx create-react-app example

在我们的应用程序中安装MUI库：

使用以下命令在我们的应用程序中设置/安装MUI库：

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

导入材料界面库：

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

Props:

• component: 用于根节点的组件。可以是一个字符串用于使用HTML元素或者一个组件。
• sx: 系统属性，允许定义系统覆盖以及其他CSS样式。所有系统属性都可以通过sx属性获取。

项目结构: 现在你的项目结构应该如下所示：

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：

npm start

示例： 将Box从‘div’更改为另一个组件。

import React from 'react'; 
import Box from "@mui/material/Box"; 
  
function App() { 
    return ( 
        <div> 
            <Box component='h2'> 
                Hello GFG 
            </Box> 
        </div> 
    ); 
} 
  
export default App;

输出：

示例： 在不同断点的框配置。框会在不同断点上改变颜色。

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;

输出: