Creating fullscreen dialogs

With fullscreen dialogs, you have more space to render information. Most of the time, you won't need full screen dialogs. In less common cases, your dialog needs as much space as possible to render information.

How to do it...

Let's say that, from some screen in your application, there's a button that exports data for the user. When clicked, you want to give the user a preview of the data that's about to be exported before they confirm. Here's what the code looks like:

import React, { Fragment, useState } from 'react';

import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material...