我有一个项目来监控员工，我在这个项目中有一个侧边栏。
正如前两张图片所示，有一个侧边栏，里面有一个按钮。然后我按下按钮，然后对话框出现在页面的“左下角”，我想做同样的想法。
在第三张图中，我在侧边栏中创建了一个按钮，当我点击这个按钮时，会出现一个对话框，但对话框出现在页面的中间，而不是页面的左下角。
我该如何解决这个问题？
const useStyles = makeStyles((theme: Theme) =>
createStyles({
dialogPaper: {
maxWidth: '36rem',
height: '33rem',
},
border: {
borderBottom: '10rem'
}, paper: {
// padding: theme.spacing(2),
// textAlign: 'center',
// color: theme.palette.text.secondary,
},
dividerColor: {
backgroundColor: '#000000',
},
resize: {
fontSize: 24,
color: '#BDBDBD'
},
oneEdgeShadow: {
background: '#384047',
boxShadow: '0 0 0 4px #384047, 0 4px 4px black',
}
})
);
export default function FormDialog() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const navigation = useNavigate();
const onMySettings=() =>{
console.log('Clicked on My settings');
navigation('/dashboard/workspace-sidebar/settings');
}
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog classes={{paper: classes.dialogPaper}} open={open} onClose={handleClose}
aria-labelledby="form-dialog-title">
<Grid container xs={12}>
<Grid item xs={2}>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{
fontWeight: 500,
fontSize: '11px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#BDBDBD'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
</ListItem>
</List>
</Grid>
<Divider classes={{root: classes.dividerColor}} orientation="vertical" flexItem/>
<Grid item xs={5}>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '10px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{
paddingBottom: '1rem',
fontWeight: 500,
fontSize: '10px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#BDBDBD'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
<ListItemText>Ali Baba {/*Workspaces*/}</ListItemText>
</ListItem>
<ListItem button>
<ListItemText primary="Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Import/Export"/>
</ListItem>
<ListItem button>
<ListItemText primary="People"/>
<Button onClick={handleClose} startIcon={<PersonAddIcon />} style={{
borderRadius: 2,background: '#7b68ee'}} variant="contained">
Invite
</Button>
</ListItem>
<ListItem button>
<ListItemText primary="Spaces"/>
</ListItem>
<ListItem button>
<ListItemText primary="Integrations"/>
</ListItem>
<ListItem button>
<ListItemText primary="Template Center"/>
</ListItem>
<ListItem button>
<ListItemText primary="Trash"/>
</ListItem>
<ListItem button>
<ListItemText primary="Security & Permissions"/>
</ListItem>
</List>
</Grid>
<Divider classes={{root: classes.dividerColor}} orientation="vertical" flexItem/>
<Grid item xs>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{paddingBottom: '1rem'}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
<ListItemText>Ali Baba</ListItemText>
</ListItem>
<ListItem button onClick={onMySettings}>
<ListItemText primary="My Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Notifications"/>
</ListItem>
<ListItem button>
<ListItemText primary="Layout size & style"/>
</ListItem>
<ListItem button>
<ListItemText primary="Rewards"/>
</ListItem>
</List>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button>
<ListItemText primary="Log out"/>
</ListItem>
<Divider classes={{root: classes.dividerColor}} variant="middle" />
<ListItem button>
<ListItemText primary="Help"/>
</ListItem>
<ListItem button>
<ListItemText primary="Hotkeys"/>
</ListItem>
<ListItem button>
<ListItemText primary="Dark mode"/>
</ListItem>
</List>
</Grid>
</Grid>
</Dialog>
</div>
);
}
2条答案
按热度按时间e0bqpujr1#
您需要修改
Dialog组件的纸张样式。首先通过
makeStyles创建您想要的风格和位置，如下所示：然后将其传递给Dialog组件：
working example in sandbox
ylamdve62#
不需要像建议的答案那样使用makeStyles。只需使用Dialog的PaperComponent属性并定义自定义PaperComponent（Dialog组件的元素容器）。
这样应该就行了
它有一个预设的边距，以保持纸张元素在一个安全的区域，不会太接近边缘。您可以通过在
<Paper/>组件的样式属性中设置margin: 0来禁用它。