Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the DialogContentText API in the Material-UI library.
The DialogContentText API of MUI denotes the text content of the Dialog API provided by MUI.
DialogContentText props:
- children: It denotes the content of the component
- classes: It denotes the styles to override the default ones.
- sx: It denotes a system prop that allows defining system overrides and additional CSS styles.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material
Project Structure: It will look like the following.
Example 1: In this example, we will try to create a simple application that uses DialogContentText component to give a textual description to Dialog API. Now write down the following code in the App.js file. Here, App is our default component where we have written our code:
Filename: App.js
Javascript
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> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: The below example demonstrates the usage DialogContentText API with the modal opening in full-screen mode. Change your App.js like the one below.
Javascript
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> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Reference: https://mui.com/material-ui/api/dialog-content-text/#main-content
