[英]how to set the width of modal of react-responsive-modal?
how do I set the width of the modal of react-responsive-modal? react-responsive-modal的模态宽度如何设置?
https://react-responsive-modal.leopradel.com/#props https://react-responsive-modal.leopradel.com/#props
<div style={{width: '600px'}} >
<Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}>
<CreateSubmenu onFormSubmit={this.onSubmenuFormSubmit} editData={editSubmenuData}/>
</Modal>
</div>
I think it would be the best it by styling class in css .react-responsive-modal-modal { width: 500px }
我认为在 css .react-responsive-modal-modal { width: 500px }
You can also use react ref to add style using javascript https://reactjs.org/docs/glossary.html#refs您还可以使用 react ref 添加样式,使用 javascript https://reactjs.org/docs/glossary.html#refs
EDIT: I created working code example: In index.html I added styles:编辑:我创建了工作代码示例:在 index.html 我添加了 styles:
<style>
.react-responsive-modal-modal {
width: 200px;
}
</style>
https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html
First off all go to the node_modules
---> react-responsive-modal
(folder) ---> (select) styles.css
then go to the .react-responsive-modal-modal
class and change the width of Modal. First off all go to the node_modules
---> react-responsive-modal
(folder) ---> (select) styles.css
then go to the .react-responsive-modal-modal
class and change the width of Modal.
.react-responsive-modal-modal {
max-width: 1000px;
display: inline-block;
text-align: left;
vertical-align: middle;
background: #ffffff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
margin: 1.2rem;
padding: 1.2rem;
position: relative;
overflow-y: auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.