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. 🙂