import { Typography, IconButton } from '@material-ui/core'; import { withStyles } from '@material-ui/core/styles'; import MuiDialogTitle from '@material-ui/core/DialogTitle'; import MuiDialogContent from '@material-ui/core/DialogContent'; import MuiDialogActions from '@material-ui/core/DialogActions'; import CloseIcon from '@material-ui/icons/Close'; const styles = (theme) => ({ root: { margin: 0, paddingBottom: theme.spacing(2), }, closeButton: { position: 'absolute', right: theme.spacing(1), top: theme.spacing(1), color: theme.palette.primary.main, }, }); export const DialogTitle = withStyles(styles)((props) => { const { children, classes, onClose, ...other } = props; return ( <MuiDialogTitle disableTypography className={classes.root} {...other}> <Typography variant="h6">{children}</Typography> {onClose ? ( <IconButton aria-label="close" className={classes.closeButton} onClick={onClose} > <CloseIcon /> </IconButton> ) : null} </MuiDialogTitle> ); }); export const DialogContent = withStyles((theme) => ({ root: { padding: theme.spacing(2), }, }))(MuiDialogContent); export const DialogActions = withStyles((theme) => ({ root: { margin: 0, padding: theme.spacing(1), }, }))(MuiDialogActions);