Как центрировать модал с переходом на материал пользовательского интерфейса и сделать его отзывчивым?

Я пытаюсь использовать модальное с переходом с использованием Material UI и имею проблему с его центрированием, а также сделать его отзывчивым или центрировать его на экране небольшого размера (мобильный).

Модальный может быть центрирован и хорошо смотрится на небольшом размере, если не использовать переход, но если я добавляю переход, модальный не может быть центрирован или отзывчив.

Это модальный код без переходной ссылки. Хорошо работает с большим или маленьким размером экрана.

Это модальный код с переходной ссылкой.

Я пытался изменить значение top & left но все еще не может быть в центре на большом и маленьком размере экрана:

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

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

Может кто-нибудь мне помочь?

3 ответа

Решение

По умолчанию модал создает родительский контейнер, который использует 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

Это работает для меня:

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

Это сработало для меня:

{
    width: '100%',
    maxWidth: '100vw',
    maxHeight: '100%',
    position: 'fixed',
    top: '50%',
    left: '0',
    transform: 'translate(0, -50%)',
    overflowY: 'auto'
}
Другие вопросы по тегам