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

Posted 2023-02-19

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

【英文标题】：How to center modal with transition on material ui and make it responsive?

【发布时间】：2018-11-29 14:46:28

【问题描述】：

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

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

这是没有转换的代码模态link。 适用于大屏幕或小屏幕。

这是带有转换link的代码模式。

我尝试更改top & left 的值，但仍然无法在大小屏幕尺寸上居中：

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

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

谁能帮帮我？

【参考方案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

【讨论】：

似乎父容器现在是默认的display: block，所以我还必须将display: flex 添加到模式中才能正常工作。

有图书馆吗？ npm 包可以轻松轻松地完成这些功能

【参考方案2】：

这对我有用：

    width: '100%',
    maxWidth: '100vw',
    maxHeight: '100%',
    position: 'fixed',
    top: '50%',
    left: '0',
    transform: 'translate(0, -50%)',
    overflowY: 'auto'

【参考方案3】：

这对我有用：

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