React MUI Display

Material-UI是一个用户界面框架，提供预定义和可自定义的React组件，加快和简化Web开发。 Material-UI组件基于Google的Material Design。在本文中，让我们讨论Material-UI库中的Display API。

MUI Display： 由MUI提供的Display API可以根据需要控制DOM元素的可见性。

MUI Display props：

创建React应用程序并安装模块：

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

npx create-react-app foldername

步骤2 ：创建项目文件夹（例如：foldername）后，使用以下指令进入该文件夹：

cd foldername

步骤3： 创建 ReactJS 应用程序后，使用以下命令安装所需模块：

npm install @mui/material

项目结构： 它将会如下所示。

示例1：

在这个示例中，我们将尝试创建一个简单的应用程序，其中包含两个DOM元素，一个元素的显示样式设置为内联，另一个为块级。

现在将以下代码写入App.js文件中。在这里，App是我们的默认组件，我们在这里编写了我们的代码：

App.js

import * as React from 'react'; 
import Box from '@mui/material/Box'; 
  
export default function BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI display API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    margin: "auto", 
                }} 
            > 
                <Box sx={{ width: '100%', height: 100 }}> 
                    <Box 
                        component="div"
                        sx={{ 
                            display: 'inline', 
                            p: 1, 
                            m: 1, 
                            bgcolor: '#101010', 
                            color: 'grey.300', 
                            border: '1px solid', 
                        }}>inline</Box> 
                    <Box 
                        component="div"
                        sx={{ 
                            display: 'block', 
                            p: 1, 
                            m: 1, 
                            bgcolor: '#101010', 
                            color: 'grey.300', 
                            border: '1px solid', 
                        }}>block</Box> 
                </Box> 
            </div> 
        </div> 
    ); 
}

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

npm start

输出: 现在打开你的浏览器，前往 http://localhost:3000/，你将看到以下的输出:

示例2： 在这个示例中，让我们根据屏幕尺寸来改变DOM元素的可见性。在小屏幕尺寸上，显示DOM元素；在大屏幕尺寸上，隐藏元素。将您的App.js更改如下。

App.js

import * as React from 'react'; 
import Box from '@mui/material/Box'; 
  
export default function BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI display API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <Box sx={{ width: '100%', height: 100 }}> 
                    <Box 
                        component="div"
                        sx={{ 
                            display: { xs: 'block', sm: 'none' }, 
                            p: 1, 
                            m: 1, 
                            bgcolor: '#101010', 
                            color: 'grey.300', 
                            border: '1px solid', 
                        }}>block</Box> 
                </Box> 
            </div> 
        </div> 
    ); 
}

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

npm start

输出：

参考： https://mui.com/system/display/