.modal-content 用于不同的模态（react-bootstrap）答案

【问题标题】：.modal-content for different Modals (react-bootstrap).modal-content 用于不同的模态（react-bootstrap）
【发布时间】：2018-12-24 21:21:10
【问题描述】：

我的应用程序中有两个不同的模态框，我希望其中一个具有橙色背景色。

我可以通过以下方式实现橙色背景色：

.modal-content {
  background: #FF8C0A;
}

但是，这会使我的应用程序中的两个模式都变成橙色。我找不到用唯一 ID 标记模态内容以仅编辑其中一个的方法。可以以某种方式使用“dialogClassName”道具吗？

注意：我已经尝试提供头部和身体 ID，并将它们的背景颜色设为橙色。这适用于桌面设备，但在移动设备上，标题和正文之间有一条透明线，看起来不太好。

谢谢！

【问题讨论】：

【解决方案1】：

在你的模式中设置backdropClassName="red"

在 CSS 中

.red {
    background: none !important;
}

【讨论】：

【解决方案2】：

您可以使用 CSS 嵌套来定位组件的子级，例如，在您的情况下，

您使用 dialogClassName 属性将您的模态命名为 info-modal，您可以在您的 CSS 中使用它

info-modal .modal-content {
  background: #FF8C0A;
}

对于其他模式类似，您可以使用dialogClassName prop 传递不同的名称

other-modal-1 .modal-content {
  background: red;
}

other-modal-2 .modal-content {
  background: green;
}

【讨论】：

完美！太感谢了！ :D
太棒了。这也帮助了我！
如果您正在使用CSS Modules 并且您尝试将生成的类名定位为React Bootstrap，该怎么办？例如modal-content。如何将生成的 CSS Module 唯一标签名称添加到 modal-content 以便我可以从那里设计它？

【解决方案3】：

您可以使用“CSS 模块”包来实现这一点。

有学习和实施 CSS 模块的有用链接..

【讨论】：