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

Question

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

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

Answer 1

一些注意点：

• position: 'absolute'以启用调整close button的位置。

• overflowY: 'unset'通过覆盖相关的样式 props 来启用对话框外的溢出paper。

• 将 MUIIconButton与CloseIcon需求 UI的图标一起使用。

• 使用 MUImakeStyles样式挂钩自定义样式。

参考：

• MUI Dialog CSS API : 纸

• MUI样式解决方案：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