如何改变material-ui对话框的位置？

Question

在我的 React 应用程序中使用 material-ui，有没有办法在打开对话框时更改位置？现在它总是居中。

提前致谢！

Answer 1

您可以创建样式并通过classesprop传递它。这是一个如何做到这一点的示例。

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

我想说不要使用position: absolute，它可能会破坏滚动行为。scroll='paper'该位置由或进行不同控制scroll='body'

您可以使用以下代码始终将对话框与具有两个自定义类的页面顶部对齐。

• 演示：codesandbox.io
• 请参阅原文并附说明

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

对于 MUI 5，我们可以使用 SxProps 和 styled() 实用程序：

通过 SxProps：

import { SxProps } from "@mui/material";

// 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>

通过样式组件：

import styled from "@mui/system/styled";

const StyledDialog = styled(Dialog)(({theme}) => ({
    "& .MuiDialog-container": {
      alignItems: "flex-start"
    }
}));

<StyledDialog
   open={infoModalOpen}
   onClose={() => setInfoModalOpen(false)}
   sx={sx}
   scroll="paper"
 >
  ....
</StyledDialog>