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

Question

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

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

Answer 1

一些注意点:

position: 'absolute'启用调整 close button的立场。

overflowY: 'unset'通过覆盖相关的样式 Prop paper 启用对话框外溢出.

使用 MUI IconButton带有图标 CloseIcon用于需求 UI。

使用 MUI makeStyles样式 Hook 来自定义样式。

引用:

梅Dialog CSS API : 纸

梅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