Question

我试图在使用Material UI的过渡中使用模态，但在居中时遇到问题，也使其在小尺寸屏幕（移动设备）中处于响应状态或居中。

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

这是不带过渡link的代码模式。无论屏幕尺寸大小如何，效果都很好。

这是具有过渡link的代码模式。

我尝试更改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={{alignItems:'center',justifyContent:'center'}}
  >

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

Answer 2

这对我有用：

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

Answer 3

这对我有用：

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

如何在材质ui上以过渡为中心放置模态并使之响应？

3 个答案: