Реагируйте на модальные и медиа-запросы

Question

Я надеюсь, что кто-нибудь покажет мне, как сделать эту реакцию модальной мобильной адаптивной. Он не использует бутстрап.

<ReactModal 
            isOpen={this.state.showModal}
        style={{
            overlay: {
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)'
        },
            content: {
            position: 'absolute',
            top: 'auto',
            marginLeft: '70px',
            marginRight: '70px',
            bottom: '200px',
            border: '1px solid #ccc',
            background: '#000',
            overflow: 'auto',
            WebkitOverflowScrolling: 'touch',
            borderRadius: '10px',
            outline: 'none',
            padding: '20px'
        }
    }}>

Answer 1

Вы не сможете добавлять медиазапросы к встроенным стилям вашего модала.

Чтобы добавить медиазапросы, вы должны использовать классы:

React-модальная демонстрация вGitHub: Использование CSS-классов для стилизации

Тогда вы сможете добавлять разные стили для разных типов экрана в вашем CSS.