React 模态和媒体查询答案

【问题标题】：React Modal and Media-queriesReact 模态和媒体查询
【发布时间】：2019-09-25 09:08:21
【问题描述】：

我希望有人能告诉我如何使这种反应模式移动响应。它没有使用引导程序。

<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'
        }
    }}>

【问题讨论】：

标签： css mobile modal-dialog media-queries react-modal

【解决方案1】：

您将无法将媒体查询添加到模态框的内联样式中。

要添加媒体查询，您应该使用类：

React-modal Demo on GitHub: Using CSS classes for styling

然后你就可以在你的 CSS 中为不同类型的屏幕添加不同的样式了。

【讨论】：