如何在材料ui过渡中心模态并使其响应？

Question

我尝试使用材质用户界面进行过渡的模态,并且有问题使其居中,并使其响应或居中在小尺寸屏幕(移动).

如果不使用过渡,模态可以居中并且在小尺寸上看起来很好,但如果我添加过渡,则模态不能居中或响应.

这是没有转换链接的代码模式.适用于大屏幕或小屏幕尺寸.

这是具有转换链接的代码模式.

我试图更改top&的值,left但仍然无法集中在大小屏幕尺寸:

function getModalStyle() {
  const top = 25;
  const left = 25;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

谁能帮我？

Answer 1

默认情况下,模态创建一个使用flex的父容器,所以为了居中,你可以注释你的left:属性,它被设置为你的模态,

return {
    top: `${top}%`,
    margin:'auto'
    // left: `${left}%`,
    // transform: `translate(-${top}%, -${left}%)`,
  };

在您的模态容器中,您可以使用此对齐项目

 <Modal
    ...
    style={{display:'flex',alignItems:'center',justifyContent:'center'}}
  >

https://stackblitz.com/edit/react-1ny5g7?file=demo.js