css – 如何在模式ui上转换模态并使其具有响应性？

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

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

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

这是转换link的代码模式.

我试图改变top&的价值离开但仍然无法集中在大小屏幕尺寸：

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

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

谁能帮我？

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

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

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

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

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