[英]How to set responsive style to react modal in React js?
我正在嘗試將樣式設置為我的模式,以便在不同媒體中具有重復性。 在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>
);
}
}
我如何添加更多樣式功能以獲取定性模態,謝謝。 如何在我的代碼中將@media樣式添加到react-modal。 請幫我。 非常感謝。
您可以將類/ ID添加到Modal和/或其子DOM中,然后使用帶有@medi
聲明的普通CSS文件,並@medi
需要對組件進行響應式樣式設置!
您只需在主index.html
文件中包含該普通CSS文件即可。
您可以嘗試使用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>
請閱讀更多信息: https : //codepen.io/claydiffrient/pen/KNjVrG
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.