[英]How to set responsive style to react modal in React js?
I am trying to set styles to my modal for be resposive in different media. 我正在尝试将样式设置为我的模式,以便在不同媒体中具有重复性。 In react js, I have used customStyle to
在React JS中,我使用了customStyle来
import Modal from 'react-modal';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
class App extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
afterOpenModal() {
// references are now sync'd and can be accessed.
this.subtitle.style.color = '#f00';
}
closeModal() {
this.setState({modalIsOpen: false});
}
render() {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
</Modal>
</div>
);
}
}
How i add more style feature to get resposive modal, thanks. 我如何添加更多样式功能以获取定性模态,谢谢。 How to add @media style to react-modal in my code.
如何在我的代码中将@media样式添加到react-modal。 Please help me.
请帮我。 Thanks alot.
非常感谢。
You can just add class/ID to your Modal and/or its child DOM, then use a normal CSS file, with @medi
a declaration, and style your component responsively as you wish! 您可以将类/ ID添加到Modal和/或其子DOM中,然后使用带有
@medi
声明的普通CSS文件,并@medi
需要对组件进行响应式样式设置!
You can simply include that normal CSS file in your main index.html
file. 您只需在主
index.html
文件中包含该普通CSS文件即可。
You can try use className and add the css for it. 您可以尝试使用className并为其添加CSS。
<ReactModal
isOpen={this.state.showModal}
contentLabel="onRequestClose Example"
onRequestClose={this.handleCloseModal}
className="YouClass"
overlayClassName="Overlay"
>
<p>Modal text!</p>
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
Please read more: https://codepen.io/claydiffrient/pen/KNjVrG 请阅读更多信息: https : //codepen.io/claydiffrient/pen/KNjVrG
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.