.modal-content 用于不同的 Modals (react-bootstrap)

Question

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

我可以通过执行以下操作来实现橙色背景色：

.modal-content {
  background: #FF8C0A;
}

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

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

谢谢！

Modal的实现截图

Answer 1

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

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

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

同样对于其他模态，您可以使用dialogClassName传递不同的名称

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

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

Answer 2

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

有学习和实现 CSS 模块的有用链接。

Answer 3

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

并在 CSS 中

.red {
    background: none !important;
}