React MUI DialogContentText API

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