React MUI DialogContentText API

0 0 2 minutes read

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!