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

Question

我正在使用Modal-component from react-bootstrap。

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

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

.modal-content {
  background: #FF8C0A;
}

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

注意：我已经尝试过提供头部和身体的ID，并将其背景色设为橙色。此功能适用于台式机，但是，在移动设备上，标头和正文之间有一条透明线，看起来不太好。

谢谢！

Screenshot of the implementation of the Modal

Answer 1

您可以使用“ CSS模块”软件包来实现此目的。

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

• https://www.javascriptstuff.com/css-modules-by-example/
• https://css-modules.github.io/webpack-demo/

Answer 2

您可以使用CSS嵌套来定位组件的子对象，例如，根据您的情况，

您使用dialogClassName的{​​{1}}道具来命名模态，您可以在我们的CSS中使用它

info-modal

与其他模式类似，您可以使用info-modal .modal-content { background: #FF8C0A; } prop

传递不同的名称

dialogClassName

Answer 3

在模态中设置backdropClassName="red"

和CSS

.red {
    background: none !important;
}