时间戳

首页 > 解决方案 > .modal-content 用于不同的模态（react-bootstrap）

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

问题描述

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

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

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

.modal-content {
  background: #FF8C0A;
}

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

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

谢谢！

Modal的实现截图

标签： javascriptcssreactjsmodal-dialogreact-bootstrap

解决方案

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

dialogClassName您使用prop to命名了您的模态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;
}

推荐阅读