最佳答案
一些注意点:
position: 'absolute'
启用调整 close button
的立场。 overflowY: 'unset'
通过覆盖相关的样式 Prop paper
启用对话框外溢出. IconButton
带有图标 CloseIcon
用于需求 UI。 makeStyles
样式 Hook 来自定义样式。 引用:
示例代码:
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
关于javascript - Material-UI Dialog 如何在对话框的右上角放置关闭按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61318855/