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

【问题标题】：How to change the position of material-ui's dialog?如何改变material-ui对话框的位置？
【发布时间】：2020-04-26 10:58:22
【问题描述】：

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

提前致谢！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以创建样式并将其传递给classes prop。以下是您如何做到这一点的示例。

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>
  );
}

【讨论】：

" classes={{ paper: classes.dialog }}".“paper”在这里做什么？
正如您在官方文档 (material-ui.com/api/dialog) 中看到的那样，这是覆盖 Dialog 内部使用的 Paper 组件样式的方法。
" 对话框：{位置：“绝对”，左：“50%”，顶部：“50%”，变换：“翻译（-75%，-50%）”，}“为什么转换在这里不起作用吗？
不确定。为我工作。也许试试transform: "translate(-75%,-50%) !important"。
position:'absolute' 和 important 不应该被使用，它们会破坏组件的正常行为。请考虑使用 flex 属性来做同样的事情

【解决方案2】：

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

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

演示：codesandbox.io
见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>
  )
}

【讨论】：

你好，位置到底部怎么样，是这样的吗？ alignItems: 'flex-end' 垂直对齐: 'bottom', ????或 verticalAlign: 'top ' 仍然。