Javascript .不同模态的模态内容（react引导）

我在用电话

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

我可以通过以下操作获得橙色背景色：

.modal-content {
  background: #FF8C0A;
}

然而，这将使我的应用程序中的两个模态都变成橙色。我找不到一种方法用唯一的ID来标记模式内容，以便只编辑其中一个。“dialogClassName”道具是否可以以某种方式使用

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

谢谢大家!

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

有一些有用的链接可用于学习和实现CSS模块

---

您可以使用CSS嵌套以组件的子级为目标，例如，在您的示例中

您使用

对话框classname

属性将模态命名为

信息模态

，您可以在您的CSS中使用此属性

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

类似地，对于其他模态，可以使用

dialogClassName

prop传递不同的名称

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

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

---

在模式中设置

backdropClassName=“red”

和CSS

.red {
    background: none !important;
}

---

完美的非常感谢大马津。这也帮了我的忙！如果您正在使用

CSS模块

，并且试图以

React Bootstrap

的生成类名为目标，该怎么办？示例

模式内容

。我如何才能将生成的

CSS模块

唯一标记名添加到

模式内容

中，以便从那里进行设计？