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：

Import Name	Prop	CSS Property	Theme Key
displayPrint	displayPrint	display	none
displayRaw	display	display	none
overflow	overflow	overflow	none
textOverflow	textOverflow	text-overflow	none
visibility	visibility	visibility	none
whitespace	whitespace	white-space	none

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

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

npx create-react-app foldername

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

cd foldername

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

npm install @mui/material

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

React MUI Display

示例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/，你将看到以下的输出:

React MUI Display

示例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> 
    ); 
}