react-bootstrap：Modal 的 dialogClassName 道具不起作用

Question

我正在使用 dialogClassName 道具将模态的宽度更改为 90%。CSS 不会改变任何东西。我已经验证 style.css 对所有其他类都可以正常工作。

这个 SO问题的解决方案不起作用。该文档也不起作用。

我感谢您的帮助！

modal.js的 render 方法：

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

样式.css：

.main-modal {
    width: 90%;
}

Answer 1

尝试

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

反而。

Answer 2

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

您可以在Modal 文档中的dialogComponentClass 的下一行中阅读dialogComponent 的描述。