React-модал не изменяет свою ширину динамически в соответствии с медиа-запросом - PullRequest
Новая
       15

React-модал не изменяет свою ширину динамически в соответствии с медиа-запросом

0 голосов
/ 30 октября 2019

Я пытаюсь динамически изменить ширину модальной зоны в зависимости от области просмотра, но следующий код не работает: 

<Modal
    isOpen={isOpen}
    contentLabel="FormModal"
    className="email-modal"               
    ariaHideApp={false}
    overlayClassName="overlay"                
    >
    <div onClick={closeModal}>
        Hello        
    </div>
</Modal>

Ниже приводится CSS: 

.email-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    background-color: rgba(201, 160,153, 0); 
    max-width: 50%;  
    border: none;
    &:focus {
        outline: 0;
    } 
}

@media (min-width: 320px) and (max-width: 480px) {
    .email-modal {
        max-width: 90%;
    }
}

Я знаю, что медиа-запрос работает, потому что, если бы я изменил любые другие атрибуты, такие как background-color, цвет меняется динамически. Тем не менее,

...