Material-UI Dialog 如何在对话框的右上角放置关闭按钮答案

【问题标题】：Material-UI Dialog How to place the close button on the top right border of the dialogMaterial-UI Dialog 如何在对话框的右上角放置关闭按钮
【发布时间】：2020-08-02 17:49:28
【问题描述】：

想在标题部分右上角添加一个关闭图标。

请帮我解决这个问题。我使用了 Material UI 对话框。一切正常，但我想在顶部有一个关闭按钮。

【问题讨论】：

如果您在 stackblitz 或其他地方共享最少的工作代码，则更容易提供帮助
寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码，最好是Stack Snippet。见How to create a Minimal, Reproducible Example
Material-ui 在他们的文档中有一个这样的例子。 material-ui.com/components/dialogs 查看“自定义对话框”并选择第一个
那个帖子解决了你的问题吗？请提供一些反馈将不胜感激。见What should I do when someone answers my question?

标签： javascript html css reactjs material-ui

【解决方案1】：

一些注意点：

position: 'absolute' 启用调整close button 的位置。
overflowY: 'unset' 通过覆盖相关样式道具paper 来启用对话框外溢出。
将 MUI IconButton 与图标 CloseIcon 一起用于需求 UI。
使用 MUI makeStyles 样式挂钩自定义样式。

参考：

MUI Dialog CSS API：论文
MUI styles solution:makeStyles

示例代码：

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paper: {
    overflowY: 'unset',
  },
  customizedButton: {
    position: 'absolute',
    left: '95%',
    top: '-9%',
    backgroundColor: 'lightgray',
    color: 'gray',
  }
}));

import CloseIcon from '@material-ui/icons/Close';
import { IconButton } from '@material-ui/core';

<Dialog
  classes={{paper: classes.paper}}
>
  <DialogActions>
    <IconButton className={classes.customizedButton}>
      <CloseIcon />
    </IconButton>
    ...
  </DialogActions>
</Dialog>

在线演示：

https://stackblitz.com/edit/mz5jx2?file=demo.js

【讨论】：