Question

我正在使用dialogClassName prop将模态的宽度更改为90％。 CSS不会改变任何东西。我已经验证了style.css适用于所有其他类。

此SO question的解决方案不起作用。 documentation也不起作用。

感谢您的帮助！

modal.js的渲染方法：

render() {
    return (
      <div>
        <CardMain openModal={this.handleOpen}
                  {...this.props} />

        <Modal
          show={this.state.open}
          onHide={this.handleClose}
          dialogClassName="main-modal"
        >

          <ModalMain tabKey={this.state.tabKey}
                      {...this.props} />

          <FeedbackForm />
        </Modal>
      </div>
    );
  }

的style.css：

.main-modal {
    width: 90%;
}

Answer 1

根据源代码，dialogClassName用于为对话框组件设置className。您可以将dialogComponent属性传递给Modal组件。

您可以在Modal docs中的dialogComponentClass中读取下一行中dialogComponent的说明。

Answer 2

尝试

.main-modal {
    min-width: 90%;
}

相反。

Answer 3

似乎BS自动将Modal.Dialog组件的类定义为.modal-dialog。通过CSS链接访问它对我来说很有效，而无需重新定义BS的所有标准CSS属性：

为id标签定义一个<Modal>，例如<Modal id="main-modal">

然后将CSS锚标记定义为#main-modal .modal-dialog {width: 90%;}

希望对您有帮助！

Answer 4

我遇到了同样的问题，发现这有效。

我的CSS：

.modal-80w {
  min-width:80%;
}

JSX：

  <div className="modal-80w">
    <Modal
      show={props.show}
      onHide={resetRatingsAndToggle}
      dialogClassName="modal-80w"
      >

    <!--MODAL CONTENT HERE -->

    </Modal>
  </div>

似乎需要将包装 DIV 的 className 以及 dialogClassName 都设置为您的 css 文件中定义的类选择器。

react-bootstrap：模态的dialogClassName支持不起作用

4 个答案: