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

Posted 2023-02-22

【中文标题】react-bootstrap：模态的 dialogClassName 道具不起作用

【英文标题】：react-bootstrap: Modal's dialogClassName prop not working

【发布时间】：2016-07-28 16:58:37

【问题描述】：

我正在使用 dialogClassName 属性将 Modal 的宽度更改为 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%;

【问题讨论】：

你检查过元素并检查为什么它没有被应用吗？可能你有其他 CSS 规则比这个更优先..

感谢您的建议。事实证明，该标签的类是“main-modal modal-dialog”。所以“模态对话框”必须覆盖它。那是内置的 react-bootstrap 模态类。知道如何覆盖它吗？

您可以编写内联 CSS 样式。它比引导规则具有更高的优先级。否则您可以使用模态的 ID 在您的 site.CSS 中指定规则。CSS 规则与ID 选择器具有更高的优先级。或者您可以添加一个自定义类并使用所有可能的类选择器编写您的 CSS 规则。 When the number of classes used in selectors are high it gets more priority... Use the one which suits the best for you

我测试了这些解决方案： 内联 CSS：我写了一个 modalStyle css 对象并设置了 dialogClassName=modalStyle。这并没有改变什么。 id: 不起作用，因为 dialogClassName 正在为某些隐藏的对话框标签设置一个类，而不是 Modal 本身。许多类选择器：我在 .main-modal 中添加了 8 个其他类选择器，但这并没有改变任何东西。我执行您的建议有误吗？

内联 CSS 意味着设置你元素的样式属性...就像这样stlye=width:90%;

【参考方案1】：

我遇到了同样的问题，发现这行得通。

我的 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 文件中定义的类选择器。

【参考方案2】：

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

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

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

希望对你有帮助！

【参考方案3】：

试试

.main-modal 
    min-width: 90%;

改为。

【参考方案4】：

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

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

【讨论】：

这个解决方案需要我从头开始重新定义模态的每个 css prop。根据文档的 dialogClassName 示例，我应该能够简单地重新定义规范道具，例如宽度。

正如您在模态渲染中看到的 (github.com/react-bootstrap/react-bootstrap/blob/master/src/…)，此属性仅传递给来自 dialogComponent 属性 (github.com/react-bootstrap/react-bootstrap/blob/master/src/…) 的 Dialog。

我明白你的意思。但是，当我实现时，我得到一个没有包含在 react-bootstrap Modal 中的 css 的模态。所以我需要重新定义一切，这是不可取的。使用 dialogComponent 不能很好地替代 dialogClassName。

抱歉，这似乎是使用 dialogClassName 的唯一解决方案