reactjs - 如何在 Material UI 对话框标题的右上角添加关闭图标？

Question

我想在右上角的标题部分添加关闭图标。

我正在使用 Material UI 对话框。一切工作正常，但我想要顶部的关闭按钮，如图所示:

Answer 1

我知道这是在 Material UI V1 之前提出的问题，但接受的答案适用于 Material UI 版本 0(或他们所说的任何名称)。

对于需要版本 1 帮助的人们，MUI 人员公开了 <DialogTitle />接受 disableTypography 的组件这样您就可以自定义对话框。

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>

我只是使用 flex 来表示 h2 之间有空格和图标

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

希望能帮助别人。 :-)