Контейнер для реагирующего модального контента ⇐ CSS

[Гость]

Наше веб-приложение имеет ширину 1280 пикселей и центрировано. Я работаю над добавлением модального окна, используя пакетact-modal. Мне нужен контейнер над контейнером ReactModal__Content ReactModal__Content--after-open, но под контейнером наложения. Потому что я все еще хочу, чтобы наложение занимало весь экран. Но тогда я хочу, чтобы контент находился в контейнере шириной 1280 пикселей и был сдвинут вправо в этом контейнере. Я попробовал свойство parentSelector, но оно поместило все, включая наложение, внутрь контейнера. Поэтому, когда я пытаюсь переместить контейнер контента, он все еще перемещается относительно контейнера наложения, который занимает 100% экрана. Возможно ли это с помощью react-modal?

Мои модальные стили выглядят следующим образом:

import { Styles } из 'реагировать-модально'; экспортировать const ModalStyles: Styles = { содержание: { позиция: 'родственник', ширина: '900 пикселей', поле: '50px авто', граница: '1px сплошной #ccc', фильтр: 'размытие (0)', непрозрачность: 1, видимость: 'видимый', boxShadow: '-2rem 2rem 2rem rgba(0, 0, 0, 0.5)', контур: 0, размер шрифта: '1.1em', FontWeight: 'жирный', Цвет фона: '#FFFFFF', переполнение: 'скрыто' }, наложение: { BackgroundColor: 'rgba(255, 255, 255, 0,6)' } }; Вот как я запускаю модальное окно:

очистка()} родительский Selector={() => document.querySelector('.modal-container')} > Окончательный HTML-код модального контейнера выглядит следующим образом:

Добавить/изменить ингредиент И мой CSS, который не влияет на контейнер контента:
.modal-container { максимальная ширина: 1280 пикселей; заполнение: 0; маржа: 0 авто; .quotes-модальный { .заголовок { цвет фона: #DDDDDD; } } }