how to set the width of modal of react-responsive-modal?

Question

how do I set the width of the modal of react-responsive-modal?

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>

Answer 1

I think it would be the best it by styling class in 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

EDIT: I created working code example: In index.html I added styles:

<style>
  .react-responsive-modal-modal {
    width: 200px;
  }
</style>

https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html

Answer 2

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