如何在材质 ui 上使用过渡使模态居中并使其响应？

Question

我尝试使用 Material UI 将模态与过渡一起使用，并且无法将其居中并使其在小尺寸屏幕（移动设备）中具有响应性或居中。

如果不使用过渡，模态可以居中并且在小尺寸上看起来不错，但是如果我添加过渡，模态不能居中或响应。

这是没有过渡 链接 的代码模态。适用于大屏幕或小屏幕。

这是带有过渡 链接 的代码模式。

我试图改变 top & left 的值，但仍然无法以大屏幕和小屏幕尺寸为中心：

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

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

谁能帮我？

原文由 Ras 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Renzo Calla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用：

 function getModalStyle() {
  return {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };
}

原文由 Harry 发布，翻译遵循 CC BY-SA 4.0 许可协议