Material-UI 對話框 如何將關閉按鈕放置在對話框的右上角

Question

想在 header 部分右上角添加關閉圖標。

請幫我解決一下這個。 我使用了 Material UI 對話框。 一切正常，但我想在頂部有一個關閉按鈕。

Answer 1

一些注意點：

• position: 'absolute'以啟用調整close button的 position。

• overflowY: 'unset'通過覆蓋相關的樣式道具paper來啟用對話框外溢出。

• 將 MUI IconButton與圖標CloseIcon用於需求 UI。

• 使用 MUI makeStyles樣式掛鈎自定義 styles。

---

參考：

• MUI對話框 CSS API ：紙

• MUI styles 解決方案：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