React MUI DialogContentText API

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

DialogContentText props:

children: 它表示组件的内容
classes: 它表示覆盖默认样式的样式。
sx: 它表示一个系统属性，允许定义系统覆盖和额外的CSS样式。

创建React应用并安装模块:

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

npx create-react-app foldername

步骤2： 创建您的项目文件夹，即文件夹名称，然后使用以下命令切换到该文件夹：

cd foldername

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

npm install @mui/material

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

React MUI DialogContentText API

示例1： 在这个示例中，我们将尝试创建一个简单的应用程序，使用DialogContentText组件为Dialog API提供文本描述。现在在App.js文件中编写以下代码。这里，App是我们的默认组件，我们在其中编写了我们的代码：

文件名：App.js

import * as React from 'react'; 
import Button from '@mui/material/Button'; 
import Dialog from '@mui/material/Dialog'; 
import DialogActions from '@mui/material/DialogActions'; 
import DialogContent from '@mui/material/DialogContent'; 
import DialogContentText from '@mui/material/DialogContentText'; 
import DialogTitle from '@mui/material/DialogTitle'; 
  
export default function AlertDialog() { 
    const [open, setOpen] = React.useState(false); 
  
    const handleClickOpen = () => { 
        setOpen(true); 
    }; 
  
    const handleClose = () => { 
        setOpen(false); 
    }; 
  
    return ( 
        <div> 
            <Button style={{ marginLeft: '50%' }}  
                variant="outlined" 
                onClick={handleClickOpen}> 
                Open dialog 
            </Button> 
            <Dialog 
                open={open} 
                onClose={handleClose} 
            > 
                <DialogTitle> 
                    Dialog title 
                </DialogTitle> 
                <DialogContent> 
                    <DialogContentText> 
                        lorem ipsum donor dialog content text. 
                    </DialogContentText> 
                </DialogContent> 
                <DialogActions> 
                    <Button onClick={handleClose}>Close</Button> 
                    <Button onClick={handleClose} autoFocus> 
                        Confirm 
                    </Button> 
                </DialogActions> 
            </Dialog> 
        </div> 
    ); 
}

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

npm start

输出： 现在打开您的浏览器并进入http://localhost:3000/，您将看到以下输出：

React MUI DialogContentText API

示例2: 下面的示例演示了在全屏模式下使用DialogContentText API的用法。将您的App.js更改为以下形式。

import * as React from 'react'; 
import Button from '@mui/material/Button'; 
import Dialog from '@mui/material/Dialog'; 
import DialogActions from '@mui/material/DialogActions'; 
import DialogContent from '@mui/material/DialogContent'; 
import DialogContentText from '@mui/material/DialogContentText'; 
import DialogTitle from '@mui/material/DialogTitle'; 
  
export default function AlertDialog() { 
    const [open, setOpen] = React.useState(false); 
  
    const handleClickOpen = () => { 
        setOpen(true); 
    }; 
  
    const handleClose = () => { 
        setOpen(false); 
    }; 
  
    return ( 
        <div> 
            <Button style={{ marginLeft: '50%' }} variant="outlined" 
                onClick={handleClickOpen}> 
                Open dialog 
            </Button> 
            <Dialog 
                open={open} 
                onClose={handleClose} 
                fullScreen 
            > 
                <DialogTitle> 
                    Dialog title 
                </DialogTitle> 
                <DialogContent> 
                    <DialogContentText> 
                        lorem ipsum donor dialog content text. 
                    </DialogContentText> 
                </DialogContent> 
                <DialogActions> 
                    <Button onClick={handleClose}>Close</Button> 
                    <Button onClick={handleClose} autoFocus> 
                        Confirm 
                    </Button> 
                </DialogActions> 
            </Dialog> 
        </div> 
    ); 
}

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