Reactjs 如何使材质ui对话框显示在屏幕高度的前半部分？

我正在使用来自MUI的对话组件，这一切都很好

我想修改现有的行为，使对话框不位于垂直轴的中心，而是位于应用程序的位置。30%来自最高层

当前情况：

 | 

 |

DIALOG

 |

 |

目标：

---

您需要修改

.MuiDialog paper

的css属性，方法是创建一个新类，并使用

类

将其分配给

对话框

组件

从“React”导入React；
从“@material ui/core”导入{makeStyles，Dialog}；
const useStyles=makeStyles({
newPosOfDialog：{
位置：“绝对”，
顶部：“30%”，
左：“50%”，
转换：“翻译（-50%，-50%）”，
}
});
函数示例（）{
const classes=useStyles（）；
返回(
........ 
);
}

请提供当前DOM的截图和一段代码。请告诉我它是否适合您！它工作得很好！你能把它作为你问题的正确答案吗？

 | 
DIALOG
 |

 |

 |

import React from 'react';
import { makeStyles, Dialog } from '@material-ui/core';

const useStyles = makeStyles({
  newPosOfDialog: {
    position: "absolute",
    top: "30%",
    left: "50%",
    transform: "translate(-50%, -50%)",
  }
});


function Example() {
  const classes = useStyles();

  return (
    <Dialog
      classes={{
        paper: classes.newPosOfDialog
      }}

      /* rest of the props */
    >
       ........ 
    </Dialog>
  );
}