How to add close icon in Material UI Dialog Header top right corner

Question

I know this was asked pre Material UI V1 but the accepted answer works for Material UI version 0 (or whatever they called it).

For people wanting help with version 1 the MUI guys have exposed a <DialogTitle /> component that accepts a disableTypography so you can customize your dialog.

EG

<Dialog open={this.state.show} onClose={this.onClose}>
    <DialogTitle disableTypography className={styles.dialogTitle}>
        <h2>Dialog...</h2>
        <IconButton onClick={this.onClose}>
            <CloseIcon />
        </IconButton>
    </DialogTitle>
    <DialogContent>
        <span>Dialog Content</span>
    </DialogContent>
</Dialog>

I just use flex with space between for the h2 and the Icon

.dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Hope that helps somebody out. 🙂

Leave a Comment Cancel reply