How to position MUI Dialog in the top-right corner?

I'm working on a React project using MUI, and I need to position the Dialog component in the top-right corner of the screen. Additionally, I do not want the default overlay (backdrop) to be shown.

Here is my current code snippet for the Dialog:

import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from '@mui/material';

const MyDialog = () => {
  return (
    <Dialog
      open={true}
      onClose={handleClose}
      PaperProps={{
        style: {
          position: 'absolute',
          top: 0,
          right: 0,
          margin: '20px',
        },
      }}
      BackdropProps={{
        style: {
          display: 'none', // Hide backdrop
        },
      }}
    >
      <DialogTitle>My Dialog</DialogTitle>
      <DialogContent>
        This is a dialog that should be in the top-right corner.
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Close</Button>
      </DialogActions>
    </Dialog>
  );
};

export default MyDialog;

Despite setting the position and attempting to hide the backdrop, the dialog does not show as expected, and the backdrop still appears.

Things I've tried:

• Using the PaperProps and BackdropProps to adjust position and backdrop visibility.
• Manually applying styles to the dialog container.

Can someone please guide me on how to achieve this?

Thanks in advance!

Refer to the official document - you can use a prop from the Modal component. For example, you can set hideBackdrop={true}, and style the dialog using & .MuiDialog-paper with position: 'fixed'.

Check the demo!

Also, is there any reason to use open={true}? Otherwise, you could use open={open} .

<Dialog
      open={open}
      onClose={handleClose}
      hideBackdrop={true}
      sx={{
        '& .MuiDialog-paper': {
          position: 'fixed',
          top: 0,
          right: 0,
          margin: '20px',
        },
      }}
    >