How to change the position of material-ui's dialog? - reactjs

Question

Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered.
Thanks in advance!

Answer 1

You can create styles and pass it through classes prop. Here is an example of how you could do that.
import React from 'react';
import { makeStyles, Dialog } from '#material-ui/core';
const useStyles = makeStyles({
dialog: {
position: 'absolute',
left: 10,
top: 50
}
});
function Example() {
const classes = useStyles();
return (
<Dialog
classes={{
paper: classes.dialog
}}
/* rest of the props */
>
{/* content of the dialog */}
</Dialog>
);
}

Answer 2

I would say don't use position: absolute, it could break the scrolling behavior. The position was control differently with scroll='paper' or scroll='body'
You can use the following code to always align your dialog to the top of the page with two custom classes.
Demo: codesandbox.io
See the original article with explanation
const useStyles = makeStyles({
topScrollPaper: {
alignItems: 'flex-start',
},
topPaperScrollBody: {
verticalAlign: 'top',
},
})
function SimpleDialog(props: SimpleDialogProps) {
const classes = useStyles()
return (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
scroll="paper"
classes={{
scrollPaper: classes.topScrollPaper,
paperScrollBody: classes.topPaperScrollBody,
}}
></Dialog>
)
}

Answer 3

For MUI 5, we can use both SxProps and styled() utility:
Via SxProps:
// flex-start: to position it at the top
// flex-end: to position it at the bottom
// center: to position it at the center
const sx: SxProps = {
"& .MuiDialog-container": {
alignItems: "flex-start"
}
};
<Dialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</Dialog>
Via styled components:
const StyledDialog = styled(Dialog)(({theme}) => ({
"& .MuiDialog-container": {
alignItems: "flex-start"
}
}));
<StyledDialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</StyledDialog>

Answer 4

#radovix's and #Sumit Wadhwa's answers are correct. In case you don't want to use makeStyles, Here is how I resolved it.
When scroll="body";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="body"
PaperProps={{ sx: { mt: "50px", verticalAlign: "top" } }}
>
{/* Dialog Content here */}
</Dialog>;
When scroll="paper";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="paper"
sx={{
"& .MuiDialog-container": {
alignItems: "flex-start",
},
}}
PaperProps={{ sx: { mt: "50px" } }}
>
{/* Dialog Content here */}
</Dialog>;
You can adjust the margin-top however you like