如何设置react-responsive-modal的模态宽度？

Question

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

我认为在 css .react-responsive-modal-modal { width: 500px }

您还可以使用 react ref 添加样式，使用 javascript https://reactjs.org/docs/glossary.html#refs

编辑：我创建了工作代码示例：在 index.html 我添加了 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;
}